[VUE]关于路由哪些事儿
什么是路由
之前有个小伙伴面试被问到:
面试官:不用vue能不能写单页面应用?
答:用angular啊(咳咳,开个玩笑),答案确实是可以的,原生js中有个事件叫做onhashchange,可以在window对象上监听这个事件,通过触发事件动态加载js,实现了没有向服务器发起请求却能通过url和页面关联,这就是所谓的前端路由了。
路由反映了url和页面的映射关系
vue路由
言归正传,说说vue-router做路由。
先来个简单的demo:npm i vue-router --save-dev
先通过js手动引入vue-router
1 |
import Vue from 'vue' |
大体步骤:1.引入 ==> 2.定义路由组件 ==> 3.创建vue-router实例并配置 ==> 4.注入vue实例
1.引入
import vue和vue-router
Vue.use(VueRouter)
2.定义路由组件
前两步没什么说的
3.路由配置:主要三个内容mode,base,routes
mode主要有两种:
- 第一种是hash模式,hash模式背后的原理就是前面提到的内置的onhashchange事件
- 第二种是history模式,使用H5的window.history功能,使用URL的Hash来模拟一个完整的URL,可以自由修改path
扯远了,第二个base,
4.注入vue实例
这里注意一下经常有这种写法:new Vue({ router, template:<div></div>
}),这里的router写法是ES6写法
嵌套路由
1 |
<div id="app"> |
样式控制(默认class)
当跳转到某个路由视图时,Vue会为对应的<router-link></router-link>
自动添加class。在添加时按照如下规则:
如果路径 部分匹配 (当前url为/a/b/c,则路由中路径为/a,/a/b,/a/b/c的均为部分匹配),则添加class=”router-link-active”。 如果路径 绝对匹配 (当前url为/a/b/c,则路由中只有路径为/a/b/c的才为绝对匹配),则添加class=”router-link-exact-active”。
注意:绝对匹配也符合部分匹配的规则,因此当一个路由和当前url绝对匹配时,会被同时加入两种class。
样式控制(自定义class)
<router-link></router-link>
自动添加的class也可以在创建路由对象时自定义。
1 |
var myRouter = new VueRouter({ |
改变router-link的模板标签
<router-link></router-link>
在页面上会默认形成<a></a>
标签。我们可以通过向其转入属性来决定生成什么样的标签,这不影响其监听点击事件来进行路由跳转。
1 |
<!--使用tag属性来指定形成的标签--> |
路由传参(通过url)
路由配置:
1 |
var myRouter = new VueRouter({ |
链接传参:
<router-link to="/r1/lins/24"></router-link>
路由传参(通过JS)
注意:当通过JS传递参数时,接受参数的路由刷新页面会导致参数失效。
路由配置:
1 |
var myRouter = new VueRouter({ |
链接传参:
1 |
// 注意这里to前面的冒号 |
路由收参
组件模板(HTML部分)收参:
组件中JS部分收参(比如created中):this.$route.params.name;
this.$route.params.age;
编程式导航(JS跳转路由)
1 |
//以下所有的的myRouter是使用new VueRouter()创建的对象 |
vue-router常见的坑
1./router/:params1/:params2
这种路由传参,由于路由规则改变了,定义的子级路由会失效
2.{name:”rou1”,path:”/r1”,component:”template1”}
这种方式接受参数的路由刷新页面会导致参数失效。
[VUE]关于路由哪些事儿的更多相关文章
- vue(5)—— vue的路由插件—vue-router 常用属性方法
前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...
- vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失
vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失 正常默认会有 .router-active-class 识别高亮 达到以上注意: 1. exact 不要加 注意是不要加,exact ...
- vue的路由映射问题
遇到的问题 今天在项目中遇到了一个问题,明明在Router文件夹下的路由js映射文件中,配置好了,如下: // 生日贺卡 { path: 'birthdayRemind', component: lo ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- Vue.js路由
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
- Vue.js路由详解
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
- vue权限路由实现方式总结二
之前已经写过一篇关于vue权限路由实现方式总结的文章,经过一段时间的踩坑和总结,下面说说目前我认为比较"完美"的一种方案:菜单与路由完全由后端提供. 菜单与路由完全由后端返回 这种 ...
- Vue 多路由文件的合并
Vue 多路由文件的合并 1.使用的是ES6 数组的合并方法 let routes = new Set([...routes1, ...homerouters]);2.两个路由文件,导出的实际上就是一 ...
- vue+element-ui路由配置相关
vue+element-ui路由配置相关 转自:http://www.cnblogs.com/MonaSong/p/6703804.html vue-router2中说明了,子路由前面可以不加'/', ...
随机推荐
- Java连接MySQL Warning: Establishing SSL connection without server's identity verification is not recommended
1. 数据库 1.1 创建表 在当前数据库students中,创建数据表student: mysql> create table student( ),#学生ID ),#学生姓名 -> a ...
- Insulator|enhancer|LCR|EKLF|CTCF|调控基因印记| A-USF|HATs|ChIP|Chip-seq|PAGE|
表观遗传学 转录因子 基本转录因子:TFIID.A.B.F.E.H. Pol II… 基转录因子具有稳定作用 组织特异性转录因子:GATA.EKLF.Bcl11A… 特异性是在特定组织中的细胞中时与细 ...
- Maven--导出pom中依赖的jar包
参考:https://my.oschina.net/cloudcoder/blog/212648 mvn dependency:copy-dependencies -DoutputDirectory= ...
- MySql数据库,查询数据导出时会出现重复的记录(数据越多越明显)
在查询数据时,数据量多的时候,我们会使用分页功能. 每页显示多少数据. 这种情况下,一半看不出什么问题. 而导出数据时,有时就是通过分页的方法,逐步讲数据追加到导出文件中. 当全部数据都导出之后,就有 ...
- iOS 中UITableView的深理解
例如下图:首先分析一下需求:1.根据模型的不同状态显示不同高度的cell,和cell的UI界面. 2.点击cell的取消按钮时,对应的cell首先要把取消按钮隐藏掉,然后改变cell的高度. 根据需求 ...
- Laravel常见问题总结
1.Whoops, looks like something went wrong. 一般报这个问题是由于复制框架文件时没有把相应的env (隐藏文件) 复制 导致新复制的框架没有配置选项 解决方法: ...
- 17.3.13---join函数
1-----Python中有join()和os.path.join()两个函数,具体作用如下: join(): 连接字符串数组.将字符串.元组.列表中的元素以指定的字符(分隔符)连接生成 ...
- MongoDB 索引 .explain("executionStats")
MongoDB干货系列2-MongoDB执行计划分析详解(3) http://www.mongoing.com/eshu_explain3 MongoDB之使用explain和hint性能分析和优化 ...
- D. Coloring Edges
You are given a directed graph with
- [JSOI2019]节日庆典(Z-algorithm)
要想让一个位置作为最小循环,其必须是最小后缀,然后一个字符串的最小后缀不超过O(logn)个,于是维护备选集合即可. 然而要在O(n)复杂度求解,需要求出原串后缀与原串的LCP长度,需要用Z-algo ...