Vue.js的路由命名與命名視圖

這次帶給大家Vue.js的路由命名與命名檢視，Vue.js路由命名與命名檢視的注意事項有哪些，下面就是實戰案例，一起來看一下。

路由命名我們可以在設定路由時,給設一個name屬性,導航過程中直接:to="{name: '對應的name'} "即可

let router = new VRouter({  mode: 'history',  routes: [
    {      path: '/apple',      component: Apple,      //命名路由
      name: 'applePage',
    }
   ......
  ]
})

在外面其他地方使用時:

<router-link :to="{name: &#39;applePage&#39;}" >to apple</router-link>

命名視圖
和上面的命名路由相似,給component,添加指定的命名

let router = new VRouter({  mode: 'history',  routes: [
    {      path: '/apple',      //命名视图
      component: {        viewA: Apple,        viewB: RedApple
      },      //命名路由
      name: 'applePage',
    }
   ......
  ]
})

#在外面其他地方使用時:

<router-view name="viewA"></router-view>或者<router-view name="viewB"></router-view>分别插入不同的视图

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Vue.js路由的其他操作

Vue.js的單位件元件

以上是Vue.js的路由命名與命名視圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！