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

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

我们提供的服务有:成都网站建设、网站制作、微信公众号开发、网站优化、网站认证、峨山县ssl等。为超过千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的峨山县网站制作公司

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

① 官方文档的解释:https://router.vuejs.org/zh/guide/essentials/named-routes.html

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

User

等同于

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

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

首先我们还是在router文件夹下index.js 给goods路由命名(其实我们一直都有命名)

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

name属性命名

然后我们再到test.vue页面中,敲:

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

test.vue

这时候我们去浏览器中点击,就发现用另一种方式实现了和普通路由跳转、编程式路由跳转一样的效果:

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

localhost

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

跳转

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

① 官方文档就说的很好嘛(https://router.vuejs.org/zh/guide/essentials/named-views.html)

简单来说就是,给不同的router-view定义不同的名字,通过名字进行对应组件的渲染。

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

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

router.png

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

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

App.vue

④ 最后我们就可以看到效果

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

localhost

3.ok,到目前为止vue-router就基本说完,还想仔细探究的同学可以去官网翻阅,加深理解;明天开始我们就开始首页的制作了,说下组件的运用并把头部、导航什么的封装。

ps:今天周一,早上有点犯困,感觉这章写的不是很通俗易懂,没办法没办法,哪里错了欢迎留言指出来一下;然后就是这章内容其实我个人觉得有点鸡肋,食之无味弃之可惜,一般在项目中还是用前两章编程式路由、动态路由什么的比较多,但是既然vue提供了这种操作肯定有它的道理,所以还是说一下。困了困了。。。

参考学习
https://router.vuejs.org/zh/
https://www.jb51.net/article/141023.htm
https://www.jb51.net/article/141020.htm

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


分享题目:讲解vue-router之命名路由和命名视图
当前地址:http://bzwzjz.com/article/pegdds.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站建设推广 达州网站设计 网站建设公司 重庆企业网站建设 成都品牌网站建设 四川成都网站设计 成都网站建设 成都网站制作 网站制作公司 LED网站设计方案 成都网站建设 成都网站设计 重庆企业网站建设 H5网站制作 重庆外贸网站建设 重庆网站制作 成都网站建设 成都商城网站建设 专业网站建设 响应式网站设计方案 网站设计 外贸网站设计方案