路由嵌套:可以理解成目录路径
直接上代码,在路由组件中写入,对应的vue内容按需写:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode:"history",//history模式可以去掉# hash模式不请求服务端。history刷新是实实在在地去请求服务器的,不玩虚的。
routes: [
{
path: '/standard',
name: 'standard',
component: resolve => require(['@/components/standard'], resolve),//父级目录
children: [
{
path: 'a',
component: resolve => require(['@/components/a'], resolve),
},
{
path: 'b',
component: resolve => require(['@/components/b'], resolve),
},
{
path: 'c',
component: resolve => require(['@/components/c'], resolve),
},
]
},
]
})
复杂的动态路由可以参考下面文章:
https://www.jianshu.com/p/4f2566b67989
我们再写一个简单的动态路由范本:
vue展示文件代码:
<router-link to="/user/1">
<el-button class="children">用户中心</el-button>
</router-link>
router路由组件写:
{ path: '/user/:id', component: user }
获取ID的vue组件
<template>
<div>
<h2>这是user动态路由组件 {{ $route.params.id }} </h2>
</div>
</template>
<script>
export default {
name: 'user'
}
</script>