vue之二級路由
阿新 • • 發佈:2018-03-14
樣式 幫助 return ... ldr 註意 ima ack help
一 樣式
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 Headerfrom ‘./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時,部分頁面是相同的,部分頁面才需要改變,這個時候,用二級路由比較合適。 不變的放在一級,需要變化的放在二級。
vue之二級路由