vue-router嵌套路由|父子路由

router/index.js

import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import Test from '../views/Test.vue' import NotFound from '../views/NotFound.vue' import TestChild from '../views/TestChild.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/test/:id', name: 'Test', component: Test, props:true, children:[ { // 嵌套路由|父子路由，/test/:id/:name全匹配，:name相对匹配，建议相对匹配，减少维护成本 path: ':name', name: 'TestChild', component: TestChild, props:true, }] }, { path: '/about', name: 'About', component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') }, { path: '*', name: 'NotFound', component: NotFound }, ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router

views/Test.vue

<template> <div> 我是Test,查看动态路由参数id:{{id}} <router-view></router-view> </div> </template> <script> export default { //接收id参数 props:["id"] } </script> <style lang="scss" scoped> </style>

views/TestChild.vue

<template> <div> 我是TestChild,查看动态路由参数name:{{name}} </div> </template> <script> export default { //接收id参数 props:["name"] } </script> <style lang="scss" scoped> </style>

效果截图：