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

2023-12-30 23:42:10

二级路由

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

比如

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

文章来源:https://blog.csdn.net/2302_79245293/article/details/135310329
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。