快捷導(dǎo)航

Vue?Router嵌套路由(children)的用法小結(jié)

更新時(shí)間：2022年08月12日 09:41:26 作者：IT利刃出鞘

嵌套路由就是父路由里面嵌套他的子路由，父路由有自己的路由導(dǎo)航和路由容器（router-link、router-view），通過(guò)配置children可實(shí)現(xiàn)多層嵌套，這篇文章主要介紹了Vue--Router--嵌套路由(children)的用法,需要的朋友可以參考下

簡(jiǎn)介

說(shuō)明

本文介紹Vue Router的嵌套路由的用法。

嵌套路由就是父路由里面嵌套他的子路由，父路由有自己的路由導(dǎo)航和路由容器（router-link、router-view），通過(guò)配置children可實(shí)現(xiàn)多層嵌套。（router-view必須要有，否則點(diǎn)擊了router-link后，路徑會(huì)變化，但頁(yè)面不改變）。

使用場(chǎng)景

嵌套路由用于實(shí)現(xiàn)頁(yè)中頁(yè)效果。例如：

用戶頁(yè)面中，有登錄頁(yè)面和注冊(cè)頁(yè)面，這兩個(gè)頁(yè)面通過(guò)標(biāo)簽切換。

此時(shí)：用戶頁(yè)面是父路由，登錄和注冊(cè)頁(yè)面是子路由

后臺(tái)管理頁(yè)面中，布局都是同一套，只是中間的內(nèi)容部分改變。（例如：vue-element-admin）
此時(shí)：整個(gè)布局是父路由，中間的內(nèi)容頁(yè)面是子路由。

官網(wǎng)網(wǎng)址

https://router.vuejs.org/zh/guide/essentials/nested-routes.html

示例

需求：寫(xiě)一個(gè)用戶頁(yè)面，里邊有登錄頁(yè)面和注冊(cè)頁(yè)面，這兩個(gè)頁(yè)面通過(guò)標(biāo)簽切換。

路由配置

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import User from '../views/user/User'
import Login from '../views/user/Login'
import Register from '../views/user/Register'
 
Vue.use(VueRouter)
 
const routes = [
  {
    path: '/',
    name: 'Home',
    redirect: User
  },
  {
    path: '/user',
    name: 'User',
    component: User,
    children: [
      {
        path: 'login',
        name: 'Login',
        component: Login
      },
      {
        path: 'register',
        name: 'Register',
        component: Register
      }
    ]
  }
]
 
const router = new VueRouter({
  routes
})
 
export default router

用戶頁(yè)面（父頁(yè)面）

User.vue

<template>
  <div class="outer">
    <h2>這是用戶頁(yè)面</h2>
    <router-link :to="{name: 'Login'}">登錄</router-link> |
    <router-link :to="{name: 'Register'}">注冊(cè)</router-link>
    <router-view></router-view>
  </div>
</template>
 
<script>
export default {
  name: 'User'
}
</script>
 
<style scoped>
.outer {
  margin: 20px;
  border: 2px solid red;
  padding: 20px;
}
</style>

登錄頁(yè)面（子頁(yè)面）

Login.vue

<template>
  <div class="outer">
    <h3>這是登錄頁(yè)面</h3>
  </div>
</template>
 
<script>
export default {
  name: 'Login'
}
</script>
 
<style scoped>
.outer {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

注冊(cè)頁(yè)面（子頁(yè)面）

Register.vue

<template>
  <div class="outer">
    <h3>這是注冊(cè)頁(yè)面</h3>
  </div>
</template>
 
<script>
export default {
  name: 'Register'
}
</script>
 
<style scoped>
.outer {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

測(cè)試

訪問(wèn)：http://192.168.0.104:8080/

結(jié)果：

點(diǎn)擊“登錄”/“注冊(cè)”：

子路由的path前加“/”

如果子路由的path的最前邊有“/”，則不需要加父路由的路徑即可訪問(wèn)此子組件。

例如，修改上邊的“路由配置”，將path: 'login'，改為path: '/login'，則登錄頁(yè)面可以這樣訪問(wèn)：

http://192.168.0.104:8080/#/login

示例

router/index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import User from '../views/user/User'
import Login from '../views/user/Login'
import Register from '../views/user/Register'
 
Vue.use(VueRouter)
 
const routes = [
  {
    path: '/',
    name: 'Home',
    redirect: User
  },
  {
    path: '/user',
    name: 'User',
    component: User,
    children: [
      {
        path: '/login',
        name: 'Login',
        component: Login
      },
      {
        path: 'register',
        name: 'Register',
        component: Register
      }
    ]
  }
]
 
const router = new VueRouter({
  routes
})
 
export default router

測(cè)試