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


Posted in Javascript onMay 28, 2018

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

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

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

就是在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路由命名(其实我们一直都有命名)

讲解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://3water.com/article/141023.htm
https://3water.com/article/141020.htm

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
微信小程序模板template简单用法示例
Dec 04 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 Javascript
JavaScript编码小技巧分享
Sep 17 Javascript
vue实现按钮切换图片
Jan 20 Vue.js
微信小程序实现图片上传功能
May 28 #Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 #Javascript
讲解vue-router之什么是编程式路由
May 28 #Javascript
讲解vue-router之什么是嵌套路由
May 28 #Javascript
微信小程序上传图片实例
May 28 #Javascript
讲解vue-router之什么是动态路由
May 28 #Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 #Javascript
You might like
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
浅谈javascript 面向对象编程
2009/10/28 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
Python机器学习之决策树算法实例详解
2017/12/06 Python
Django中url的反向查询的方法
2018/03/14 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
Python用字典构建多级菜单功能
2019/07/11 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
五十岁生日宴会答谢词
2014/01/15 职场文书
小学毕业感言300字
2014/02/19 职场文书
应届生自荐书
2014/06/23 职场文书
争先创优活动总结
2014/08/27 职场文书
扬州个园导游词
2015/02/06 职场文书
股东协议书范本2016
2016/03/21 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js