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: 'applePage'}" >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>分别插入不同的视图

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

推荐阅读：

Vue.js路由的其他操作

Vue.js的单位件组件

以上就是Vue.js的路由命名和命名视图的详细内容，更多请关注其它相关文章！