路由嵌套：可以理解成目录路径
直接上代码，在路由组件中写入，对应的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>
