Vue.js的路由命名和命名视图

php中世界最好的语言
Lepaskan: 2018-03-13 14:43:00
asal
1873 orang telah melayarinya

这次给大家带来Vue.js的路由命名和命名视图,Vue.js路由命名和命名视图的注意事项有哪些,下面就是实战案例,一起来看一下。

路由命名我们可以在设置路由时,给设一个name属性,导航过程中直接:to="{name: '对应的name'}"即可

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

在外面其他地方使用时:

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

命名视图
和上面的命名路由相似,给component,添加指定的命名

let router = new VRouter({  mode: &#39;history&#39;,  routes: [
    {      path: &#39;/apple&#39;,      //命名视图
      component: {        viewA: Apple,        viewB: RedApple
      },      //命名路由
      name: &#39;applePage&#39;,
    }
   ......
  ]
})
Salin selepas log masuk

在外面其他地方使用时:

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

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Vue.js路由的其他操作

Vue.js的单位件组件

Atas ialah kandungan terperinci Vue.js的路由命名和命名视图. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!