命名路由和命名视图

前言:前面我们把动态路由、嵌套路由等讲完了,说道完命名路由和命名视图,vue-router的基本使用方法就算是介绍完了,还想仔细探究的同学可以去官网翻阅,加深理解。
GitHub:https://github.com/Ewall1106/mall

命名路由

  • 首先来说说什么是命名路由?就是在routers配置路由的时候给路由取个名。
  • 这样的好处就是可以在使用router-linkto属性跳转路由的时候传一个对象从而实现与router.push一样的效果:
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

// 等同于

router.push({ name: 'user', params: { userId: 123 }})

实例演示

  • 首先我们还是在router文件夹下 > index.jsgoods路由命名:
name属性命名
  • 然后我们再到test.vue页面中输入:
test.vue
  • 这时候我们去浏览器中点击,就发现用另一种方式实现了和普通路由跳转、编程式路由跳转一样的效果:
localhost
跳转

命名视图

  • 简单来说就是,给不同的router-view定义不同的名字,通过名字进行对应组件的渲染。
  • 现在我们进入路由页面,把先前写的全部删掉,以根路由来实践一下什么叫命名视图。我们在根路由下定义了三个组件:
router.png
  • 然后我们进入根路由/所在的页面,也就是app.vue,我们第一个router-view不命名就使用默认的,其它两个router-view添加name属性命名
App.vue
  • 最后我们就可以看到效果:
localhost
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容