6.vue-router之命名路由和命名视图

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

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

① 官方文档的解释:https://router.vuejs.org/zh/guide/essentials/named-routes.html 就是在routers配置路由名称的时候给路由定义不同的名字,这样的好处就是可以在使用router-linkto属性跳转路由的时候传一个对象从而实现与router.push一样的效果:

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

等同于

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

② 好了,具体手上实践看看到底应该怎么做 首先我们还是在router文件夹下index.js 给goods路由命名(其实我们一直都有命名)

name属性命名

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

test.vue

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

localhost

跳转

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

① 官方文档就说的很好嘛(https://router.vuejs.org/zh/guide/essentials/named-views.html) 简单来说就是,给不同的router-view定义不同的名字,通过名字进行对应组件的渲染。

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

router.png

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

App.vue

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

localhost

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

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

参考学习 https://router.vuejs.org/zh/ https://www.jianshu.com/p/81ed5a90bb10 https://www.jianshu.com/p/f499d9f64958

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏黑白安全

社会工程学之手机号伪造

任意显示手机号,使用者想令对方看到你的手机号是怎样的,对方就看到是怎样的,不会显示机主号。

2573
来自专栏数据小魔方

R语言爬虫实战——知乎live课程数据爬取实战

本文是一篇R语言爬虫实战练习篇,同样使用httr包来完成,结合cookies登录、表单提交、json数据包来完成整个数据爬取过程,无需书写复杂的xpath、cs...

4296
来自专栏happyJared

程序员神器,IntelliJ IDEA 2018.1 正式发布

3月27日,jetbrains正式发布期待已久的IntelliJ IDEA 2018.1,再次让人眼前一亮:什么,还能这么玩?

871
来自专栏编程

朱辉:Linux Kernel iowait 时间的代码原理

之前在我热爱的公众号Linuxer看到The precise meaning of I/O wait time in Linux这篇文章,感觉写的不错,就是没有...

2739
来自专栏王磊的博客

Node出错导致运行崩溃的解决方案

许多人都有这样一种映像,NodeJS比较快; 但是因为其是单线程,所以它不稳定,有点不安全,不适合处理复杂业务; 它比较适合对并发要求比较高,而且简单的业务场景...

61514
来自专栏Java爬坑系列

C语言dll文件的说明以及生成、使用方法

  最近在搞一些小项目,由于要涉及到跟其它语言进行交互,动态链接库变成了不二的选择。为此也查阅了很多资料,将动态链接库的相关知识在此做一个整理。 一、动态链接...

4276
来自专栏FreeBuf

JIS-CTF靶机+Kioptrix靶机渗透

最近一直在down各种CTF靶机玩,本次分享的2个靶机因较基础,故合并成一篇文章发表,本文章仅为初学者练手学习使用,大神们勿喷,感谢各位大佬!

1324
来自专栏灯塔大数据

技术 | Python从零开始系列连载(一)

导读 安装环境 大家和我一起搜索一下anaconda(注意用谷歌浏览器https://www.continuum.io/downloads): ? 在首页我们...

3734
来自专栏杨建荣的学习笔记

Greenplum集群问题修复案例

我看了下GP Master端,看到负载并不高,当然这是一个初步的检测,如果集群响应缓慢,则很可能是segment节点上出现了延迟。一看则吓一跳,这是一个segm...

1062
来自专栏Web 开发

NodeJS那些事

下半年做了挺多活动型需求,因为我们业务人力有限,我在业务的策略是不依赖NodeJS。

1640

扫码关注云+社区