二级路由的配置以及注意项

二级路由

比如说LayOut组件是父亲，LayOut和ArtComp是儿子，那我们怎么给儿子配路由呢？

1、首先在router下的index.js导入组件，配置规则，详细如下

// 导入路由相关组件
import LayOut from '@/views/LayOut'
import UserComp from '@/views/UserComp'
import ArtComp from '@/views/ArtComp'
// 导入Vue和vueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'
// 注册vue
Vue.use(VueRouter)
const router = new VueRouter({routes: [{path: '/dash',component: LayOut,redirect: '/dash/dashuser',// 子路由children: [{path: 'dashuser', // 配置子路由不需要加/,如果path:''就是为空，表示默认二级路由component: UserComp},{path: 'ArtComp',component: ArtComp}]}

注意：

如果想要页面一进去就想显示想要的那个页面用，可以在规则里用重定向redirect: '/dash/dashuser',
如果子路由路径为空字符串的时候，一进去子组件就会渲染，表示默认二级路由，但是路由配置中也要空的组件作为占位符。

2、然后再父亲(LayOut)中创建路由链接及样式等

<template><div class="box"><router-link to="/dash/dashuser">考勤管理</router-link><router-link to="/dash/ArtComp">用户管理</router-link><router-view></router-view></div>
</template><script>
export default {}
</script><style lang="less" scoped>.box{width: 100%;height: 100vh;background-color: red;}
</style>

3、在儿子里分别写内容

比如