app.vue

<template><div id="app"><router-link to="/home">首頁</router-link><router-link to="/about">關于</router-link><router-link v-bind:to="'/user/'+userId">用戶</router-link><router-view></router-view></div> </template><script> export default {name: 'App',data(){return{userId:'geyao'}},methods:{} } </script><style></style>

?Home.vue

<template> <div> <h2> 我是首頁 </h2> <p>我是首頁內容</p> <router-link to="/home/news">新聞</router-link> <router-link to="/home/message">新聞</router-link> <router-view></router-view> </div> </template><script> export default{name:"Home" } </script><style scoped></style>

about.vue

<template> <div> <h2> 我是about </h2> <p>我是首頁內容</p> </div> </template><script> export default{name:"Home" } </script><style scoped></style>

User.vue

<template> <div> <h2> 我是user </h2> <p>我是首頁內容</p> <h2>{{userId}}</h2></div> </template><script> export default{name:"User",computed:{userId(){return this.$route.params.userId}} } </script><style scoped></style>

HelloWorld.vue

<template> <div> <h2> 我是about </h2> <p>我是首頁內容</p> <p>我是首頁內容</p> <p>我是首頁內容</p> <p>我是首頁內容</p> <ul> <li> 1 </li> </ul> </div> </template><script> export default{name:"Home" } </script><style scoped></style>

index.js

import VueRouter from 'vue-router' import Vue from 'vue' import Home from '../components/Home' import About from '../components/About' import User from '../components/User' import HomeNew from '../components/HelloWorld' import HomeMessage from '../components/Hello' Vue.use(VueRouter)const routes = [{path: '/',redirect: '/home'}, {path: '/home',component: Home,children: [{path: 'news',component: HomeNew},{path: 'message',component: HomeMessage},]},{path: '/about',component: About},{path: '/user/:userId',component: User},]//安裝插件 const router = new VueRouter({//配置之間的關系routes,mode: 'history',linkActiveClass: 'active' })export default router

Hello.vue

<template> <div> <h2> 我是about </h2> <p>我是首頁內容</p> </div> </template><script> export default{name:"Home" } </script><style scoped></style>

運行結果

總結

以上是生活随笔為你收集整理的前端学习（2176）：vue-router的路由的嵌套使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。