vue中用watch监听当前路由
之前做项目时,特别是后台项目,左边都有侧边栏,我们需要做到点击某个侧边栏的项让这个项高亮,之前采用的是给每个项绑定一个值,点击某个项时,就将这个值付给一个变量,在每一项上判断这个变量是否与每项上的值相等,从而使对应项高亮,
但是最近在vue-element-admin上看到的是,他的侧边栏其实就是路由的配置,只要配置路由,就会在侧边栏显示,于是,他采用了监听$route的方式来确定当前页,从而确定哪一项高亮,而且前进后退也不会出现其他问题,下面上一个代码,
从此让你知道$route也是可以这样使用!!!
watch:{
$route:{
handler(newRouter){
this.curTagName=newRouter.name;
},
immediate: true
}
},
另外,利用好$router中的路由元信息,是可以做出好多东西的,比如说面包屑,这些vue-element-admin上都有体现!!!
下面是计算属性和watch的配合使用 可以监听对象里的某一个值
computed:{
testText1 () {
return this.test.text1
}
},
watch:{
testText1: {
dosomething (newVal,oldVal){
// code
}
}
}
}
vue中用watch监听当前路由的更多相关文章
- vue mounted中监听div的变化
vue mounted中监听div的变化 <div style="width:200px;height:30px;background: #0e90d2" id=" ...
- Vue之数据监听存在的问题
Vue之数据监听 当数据监听的是列表时,数据发生改变,不会被监听到. // 用$set修改数组中的数组能够被监听 // app.$set(this.hobby, 0, "爱你哦") ...
- Vue的watch监听事件
Vue的watch监听事件 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue watch 深层监听
Vue中监听某个对象的属性 为了避免监听整个对象导致效率问题,可以监听某个对象的特定属性 watch: { 'deptModel.depts': { handler(newVal, oldVal) { ...
- Vue之watch监听对象中某个属性的方法
新建 userinfo = { name: "小明", age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...
- vue 在.vue文件里监听路由
监听路由 watch $route vue项目中的App.vue 文件 <template> <div id="app"> <!--includ ...
- vue路由监听及路由守卫
路由监听: //当一个组件被复用的时候,那么路由发生变化,但是页面上面的数据不会发生变化 新建one.vue 组件 作为home的子组件,在home.vue 中写遍历渲染页面 ,并用params传参, ...
- vue 如何通过监听路由变化给父级路由菜单添加active样式
1.项目需求:在项目开发中,多级菜单的情况下,勾选子菜单时,需要在父级菜单添加active样式. 2.遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact ...
- vue浏览器返回监听
具体步骤如下: 1.挂载完成后,判断浏览器是否支持popstate mounted(){ if (window.history && window.history.pushState) ...
随机推荐
- 对Python中print函数参数的认识
输出函数是最常用的,对print()参数的准确认识尤为重要. sep='':sep参数表示函数中不同value的分隔符,默认为一个空格. end='':end参数表示函数结尾的处理,默认换行. 例如: ...
- Python学习2——使用字符串(完整版)
""" 在C语言入门的时候字符串没有好好学习,导致后期语言根本没有入门, 更导致之后大量的codeing时间浪费,效率低下. 因此,借助这次Python入门,好好地将字符 ...
- Class.getResources()和classLoader.getResources()区别
Class.getResource(String path) path不以’/'开头时,默认是从此类所在的包下取资源: path 以’/'开头时,则是从ClassPath根下获取: package t ...
- JAVA生成验证码代码
生成base64格式图片验证码 /** * 验证码的候选内容 */ private char codeSequence[] = {'a', 'b', 'c', 'd', 'e', 'f', 'g', ...
- 逆向知识第九讲,switch case语句在汇编中表达的方式
一丶Switch Case语句在汇编中的第一种表达方式 (引导性跳转表) 第一种表达方式生成条件: case 个数偏少,那么汇编中将会生成引导性的跳转表,会做出 if else的情况(类似,但还是能分 ...
- hdu 6140 思维
题解:这道题中的数能组成的数构成了一个连续区间. 一开始只有 a1 的时候能够构成 [-1, 1][−1,1] 中的所有整数. 如果一堆数能够构成 [-a, b][−a,b] 中的所有整数, 这时 ...
- Python文件的四种读写方式——r a w r+
# 文件的基本操作,但是一般不这么使用,因为经常会忘记关闭 password=open("abc.txt",mode="r",encoding="UT ...
- mycat sql timeout 问题解决
发现程序中有个批量update语句需要update 16000多条数据导致超时 2019-11-06 10:35:28.312 pool-9-thread-24 ERROR com.hp.nova.c ...
- ActiveMQ入门系列二:入门代码实例(点对点模式)
在上一篇<ActiveMQ入门系列一:认识并安装ActiveMQ(Windows下)>中,大致介绍了ActiveMQ和一些概念,并下载.安装.启动他,还访问了他的控制台页面. 这篇,就用代 ...
- SAP云平台里Global Account和Sub Account的关系
在Cloud Foundry环境里,一个Global Account或者Trial Account能够创建多个SubAccount,如图: 创建好的新的subaccount: 一旦subaccount ...