讲解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 相关文章推荐
document.forms用法示例介绍
Jun 26 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
VUE长按事件需求详解
Oct 18 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
vue如何搭建多页面多系统应用
Jun 17 Javascript
微信小程序实现图片上传功能
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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
php 无限分类的树类代码
2009/12/03 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
python 实现屏幕录制示例
2019/12/23 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
高分子材料与工程专业推荐信
2013/12/01 职场文书
旅游管理专业个人求职信范文
2013/12/24 职场文书
出国留学经济担保书
2014/04/01 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
仓管员岗位职责
2015/02/03 职场文书
三八妇女节寄语
2015/02/27 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
人民检察院起诉书
2015/05/20 职场文书
党支部评议意见
2015/06/02 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书