美文网首页
vue-router之命名路由和命名视图

vue-router之命名路由和命名视图

作者: zsyyyyy | 来源:发表于2019-05-13 19:54 被阅读0次

6、vue-router之命名路由和命名视图

1.首先来说说什么是命名路由?

就是在routers配置路由名称的时候给路由定义不同的名字,这样的好处就是可以在使用router-link的to属性跳转路由的时候传一个对象从而实现与router.push一样的效果:

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

等同于

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

② 好了,具体手上实践看看到底应该怎么做

首先我们还是在router文件夹下 》 index.js 给goods路由命名(其实我们一直都有命名) image
然后我们再到test.vue页面中,敲:
image
这时候我们去浏览器中点击,就发现用另一种方式实现了和普通路由跳转、编程式路由跳转一样的效果: image

2.再来说说什么是命名视图

① 官方文档就说的很好嘛(https://router.vuejs.org/zh/guide/essentials/named-views.html
简单来说就是,给不同的router-view定义不同的名字,通过名字进行对应组件的渲染。

② ok,现在我们进入路由页面,把先前写的全部删掉,以根路由来实践一下什么叫命名视图。我们在根路由下定义了三个组件

image

如果 router-view 没有设置名字,那么默认为 default。

③ 然后我们进入根路由'/'所在的页面,也就是app.vue,我们第一个router-view不命名就使用默认的,其它两个router-view添加name属性命名 image
④ 最后我们就可以看到效果 image

相关文章

  • vue-router之命名路由和命名视图

    6、vue-router之命名路由和命名视图 1.首先来说说什么是命名路由? 就是在routers配置路由名称的时...

  • 6.vue-router之命名路由和命名视图(手把手教你用vue

    前言:前面我们把动态路由、嵌套路由等讲完了,说道完命名路由和命名视图,vue-router的基本使用方法就算是完篇...

  • vue-router命名路由和命名视图

    命名路由 命名路由是什么(就是给路由配置一个name) 在创建router实例的时候,在routes配置中给某个路...

  • 4、vue-router之命名路由和命名视图

    1.首先来说说什么是命名路由? ① 官方文档的解释:https://router.vuejs.org/zh/gui...

  • vue-路由

    需要掌握: 路由map路由视图路由导航 路由参数的配置嵌套路由的使用 命名路由和命名视图重定向 router/in...

  • Vue-router2.0基础实践

    基础用法: 动态路由匹配: 嵌套路由: 编程式路由: 命名路由: 命名视图:

  • vue 命名路由和命名视图

    命名路由就是给路径添加一个别名省去手写路径直接以别名替代路径 命名视图 有时候想同时 (同级) 展示多个视图,而不...

  • 6、vue-router路由

    1、安装 2、结构 3、动态路由匹配 4、嵌套路由 5、编程式导航 6、命名路由 7 、命名视图 8、重定向和别名...

  • larevel 路由索引

    基本路由:路由重定向、视图路由路由参数:必选、可选、正则表达式命名路由路由组:中间件、命名空间、子域名路由、路由前...

  • vue-router

    前端路由的基本原理 vue-router的基本使用 命名路由 路由参数 嵌套路由

网友评论

      本文标题:vue-router之命名路由和命名视图

      本文链接:https://www.haomeiwen.com/subject/xfkkaqtx.html