讲解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 相关文章推荐
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
js获取 type=radio 值的方法
May 09 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
JSONObject使用方法详解
Dec 17 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
浅谈es6 javascript的map数据结构
Dec 14 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 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
一个目录遍历函数
2006/10/09 PHP
PHP获取网卡地址的代码
2008/04/09 PHP
php 表单验证实现代码
2009/03/10 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
easyui validatebox验证
2016/04/29 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
Java基础知识面试题
2014/03/25 面试题
2014年关于两会精神的心得体会
2014/03/17 职场文书
人力资源管理求职信
2014/08/07 职场文书
个人租房协议书范本
2014/09/30 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
Python Parser的用法
2021/05/12 Python
Nginx反向代理学习实例教程
2021/10/24 Servers
JavaScript实现优先级队列
2021/12/06 Javascript