讲解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 相关文章推荐
xml和web特殊字符
Apr 28 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
Vue实现星级评价效果实例详解
Dec 30 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
PHP+DBM的同学录程序(3)
2006/10/09 PHP
理解和运用PHP中的多态性[译]
2011/08/02 PHP
跟我学Laravel之路由
2014/10/15 PHP
php实现singleton()单例模式实例
2014/11/06 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
JS模板实现方法
2013/04/03 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
Python中使用partial改变方法默认参数实例
2015/04/28 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
《花木兰》教学反思
2014/04/09 职场文书
火锅店的活动方案
2014/08/15 职场文书
施工安全协议书
2016/03/22 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
django 认证类配置实现
2021/11/11 Python