router-view :

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

　　一 樣式

　　1 在一個(gè)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 ' 注意：沒(méi)有 /

　　　　　　　　　　　　name:' oo', 這個(gè)是用于反向查找， 組件中 <router-link :to="{name:'oo'}">oo</router-link>, name對(duì)應(yīng)的就是 路由中的name。注意 是 ：to = " { name:' oo'}"

　　　　　　　　　　　　component:oo, 從前到后找到這個(gè)組件，先一級(jí)組件，在二級(jí)組件

　　　　　　　　　　]

　　　　}

　　3 每一個(gè) 二級(jí)路由都對(duì)應(yīng)獨(dú)自的 vue組件。

　　通過(guò)反向查找，先加載一級(jí)路由"xx"，在加載二級(jí)路由"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,
          },
      ]
    },
  ]
})

　項(xiàng)目結(jié)構(gòu)

　　

　　help.vue

<template>
  <div>
    <p>{{msg}}</p>
    <router-view></router-view>
  </div>
</template>

<script>
  export default{
      name:'help',
      data(){
          return{
            msg:'這是幫助信息',
          }
      }
  }
</script>

<style>

</style>

三 有什么用

　　當(dāng)指向不同的url時(shí)，部分頁(yè)面是相同的，部分頁(yè)面才需要改變，這個(gè)時(shí)候，用二級(jí)路由比較合適。 不變的放在一級(jí)，需要變化的放在二級(jí)。

總結(jié)

以上是生活随笔為你收集整理的vue之二级路由的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。