?router-view :??

　　<router-view>?組件是一個 functional 組件，渲染路徑匹配到的視圖組件

　　一 樣式

　　1 在一個vue組件,<template></template>中，在加入<router-view></router-view>

　　　　<template>

　　　　　　<div>

　　　　　　　　.......

　　　　　　　　<router-view></router-view>

　　　　　　</div>　　

　　　　</template>

　　2 在路由中 router/index.js 中，

　　　　{

　　　　　　path:'/xx',

　　　　　　name:'',

　　　　　　component:xx,

　　　　　　children:[

　　　　　　　　　　　　path:' oo '? ? ? ?注意：沒有 /

　　　　　　　　　　　　name:' oo',? ? ?這個是用于反向查找，? 組件中? <router-link :to="{name:'oo'}">oo</router-link>,? name對應的就是 路由中的name。注意 是 ：to = " { name:' oo'}"

　　　　　　　　　　　　component:oo,? 從前到后找到這個組件，先一級組件，在二級組件

　　　　　　　　　　]

　　　　}

　　3 每一個 二級路由都對應獨自的 vue組件。

　　通過反向查找，先加載一級路由"xx"，在加載二級路由"oo"。

二 代碼示例

　　App.vue

　　

<template><div id="app"><Header></Header><router-view></router-view><Footer></Footer></div> </template><script>import Header from './components/Header.vue'import Footer from './components/Footer.vue' export default {name: 'App',components:{Header,Footer,} } </script><style></style>

　　路由

Vue.use(Router)export default new Router({mode:'history',routes: [{path: '/',name: 'index',component: Index,},{path: '/index',name: 'index',component: Index,},{path: '/course',name: 'course',component: Course,},{path: '/news',name: 'news',component: News,},{path: '/help',name: 'help',component: Help,children:[{path: 'aboutus',name: 'aboutus',component: Aboutus,},{path: 'feedback',name: 'feedback',component: Feedback,},{path: 'usernote',name: 'usernote',component: Usernote,},]},] })

　項目結構

　　

　　help.vue

<template><div><p>{{msg}}</p><router-view></router-view></div> </template><script>export default{name:'help',data(){return{msg:'這是幫助信息',}}} </script><style></style>

?

三 有什么用

　　當指向不同的url時，部分頁面是相同的，部分頁面才需要改變，這個時候，用二級路由比較合適。 不變的放在一級，需要變化的放在二級。

轉載于:https://www.cnblogs.com/654321cc/p/8568685.html

總結

以上是生活随笔為你收集整理的vue之二级路由的全部內容，希望文章能夠幫你解決所遇到的問題。

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