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

香香爱编程2023-12-31 4:04

二级路由

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

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

javascript 复制代码

// 导入路由相关组件
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)中创建路由链接及样式等

javascript 复制代码

<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、在儿子里分别写内容

比如

效果：考勤管理和用户管理可以点击跳转