VUE_嵌套路由(Router)

系统管理员 2022-04-11 10:46 339阅读 0赞

> 什么是嵌套路由？
> 
> 顾名思义，就是在路由内又嵌套了一层路由

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dpdGhfSGVy_size_16_color_FFFFFF_t_70][]

# 1.编写需要嵌套的路由组件 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dpdGhfSGVy_size_16_color_FFFFFF_t_70 1][]

# 2.在路由器配置嵌套路由组件 #

/*
    路由器模块
     */
    import Vue from  "vue"
    import VueRouter from "vue-router"
    
    import About from "../views/About.vue"  //路由组件
    import Home from "../views/Home.vue"    //路由组件
    import Message from "../views/Message.vue"
    import News from "../views/News.vue"
    
    
    Vue.use(VueRouter)
    
    export default new VueRouter({//向外暴露路由器对象
      //配置N个路由
      routes:[
        {
          path:"/about",
          component:About
        },
        {
          path:"/home",//path最左侧的/代表根路径
          component:Home,
          children:[//嵌套路由
            {
              path:"/home/news",//具体写法
              component:News
            },
            {
              path:"message",//简化写法
              component:Message
            },
            {
              path:"",
              redirect:"/home/news"
            }
          ]
        },
        {
          path:"/",
          redirect:"/about"
        }
      ]
    })

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dpdGhfSGVy_size_16_color_FFFFFF_t_70 2][]

# 3.在被嵌套的路由内引入嵌套路由 #

<template>
        <div>
          <h2>Home</h2>
          <div>
            <ul class="nav nav-tabs">
                <router-link to="/home/news">News</router-link>
                <router-link to="/home/message">Message</router-link>
            </ul>
            <div>
              <router-view></router-view>
              <hr>
            </div>
          </div>
        </div>
    </template>
    
    <script>
      export default {// 向外默认暴露一个出口(对象)
    
      };
    </script>
    
    <style>
    
    </style>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dpdGhfSGVy_size_16_color_FFFFFF_t_70 3][]

# 4.完工！ #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dpdGhfSGVy_size_16_color_FFFFFF_t_70]: /images/20220411/df112c7f59b94f498b9b7d0b8c046be6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dpdGhfSGVy_size_16_color_FFFFFF_t_70 1]: /images/20220411/eec413e1e208483a8ce6461a6630a20f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dpdGhfSGVy_size_16_color_FFFFFF_t_70 2]: /images/20220411/c6d9547647eb49cf801a481d9a646005.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dpdGhfSGVy_size_16_color_FFFFFF_t_70 3]: /images/20220411/42174763a55a45afba51f2788df87361.png