為什么80%的碼農都做不了架構師？>>> ??

實際生活中的應用界面，通常由多層嵌套的組件組合而成。同樣地，URL 中各段動態路徑也按某種結構對應嵌套的各層組件。借助?vue-router，使用嵌套路由配置，就可以很簡單地表達這種關系。

觀看此文檔時應該先看“Vue-router HelloWorld”文檔。

創建Hi1，Hi2兩個新頁面

在src/components目錄下，新建 Hi1.vue 以及Hi2.vue文件。

<template><div><h2>{{message}}</h2></div> </template> <script> export default {name: "Hi",data() {return {message : 'Wo Shi Hi1!'};} }; </script> <style scoped></style> <template><div><h2>{{message}}</h2></div> </template> <script> export default {name: "Hi",data() {return {message : 'Wo Shi Hi2!'};} }; </script> <style scoped></style>

修改Hi.vue頁面

修改src/components目錄下Hi.vue文件。

<template><div><h2>{{message}}</h2><!-- 增加路由 --><router-view></router-view></div> </template> <script> export default {name: "Hi",data() {return {message : 'Wo Shi Hi!'};} }; </script> <style scoped></style>

改造App.vue的導航代碼

改造app.vue的導航代碼，用<router-link>標簽增加了兩個新的導航鏈接，增加Hi1及Hi2導航。

<template><div id="app"><img src="./assets/logo.png"><!-- 導航 --><div><router-link to="/">Hello</router-link>|<router-link to="/Hi">Hi</router-link>|<router-link to="/Hi/Hi1">Hi1</router-link>|<router-link to="/Hi/Hi2">Hi2</router-link></div><router-view/></div> </template><script> export default {name: 'App' } </script><style> #app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px; } </style>

修改router/index.js代碼

修改router/index.js代碼，增加子路由。子路由的寫法是在原有的路由配置下加入children字段。

children:[ {path:'/',component:xxx}, {path:'xx',component:xxx}, ]

index.js全部代碼為：

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' // 引入Hi import Hi from '@/components/Hi' // 引入Hi1 import Hi1 from '@/components/Hi1' // 引入Hi2 import Hi2 from '@/components/Hi2'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},// 配置Hi對象{path: '/Hi',name: 'Hi',component: Hi,//引子路由children:[{path:'/',component:Hi},{path:'Hi1',component:Hi1},{path:'Hi2',component:Hi2},]}] })

完成以上調整之后，我們就可以啟動服務，在瀏覽器中輸入以下信息，查看是否成功了：

點擊Hi1

點擊Hi2

通頁面查看，我們可以看到Hi1和Hi2的頁面，不僅包括自己頁面的內容，還包括Hi頁面內容，表示我們子路由配置成功

轉載于:https://my.oschina.net/sdlvzg/blog/1798162

總結

以上是生活随笔為你收集整理的Vue-router(二) 子路由（嵌套路由）的全部內容，希望文章能夠幫你解決所遇到的問題。

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