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) ...
随机推荐
- not or and 的优先级是不同的
not or and 的优先级是不同的: not > and > or 请用最快速度说出答案: not 1 or 0 and 1 or 3 and 4 or 5 and 6 or 7 an ...
- python--基本语法与变量
python基本语法与变量 python语句的缩进 Python代码块使用缩进对齐表示代码逻辑,Python每段代码块缩进的空白数量可以任意,但要确保同段代码块语句必须包含相同的缩进空白数量.建议在代 ...
- HTML练习一
效果图 动态图 html代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- Hash一致性算法底层原理
大纲 Hash取余算法 判定哈希算法好坏的四个定义 一致性Hash算法的两大设计 Hash取余算法 hash(Object.key)%N,hash值随Object.key.N的变化而变化. 如果有节点 ...
- Stanford NLP 课堂笔记之正则表达式
1.[]表达式的用法 正则表达式可以让我们匹配我们想要的字符串形式,增加了效率,在自然语言处理领域有较大的作用. 模式 匹配 [Ww]oodchuck Woodchuck,woodchuck [123 ...
- str.charAt()与str[]的区别
str.charAt():只能显示当前字符,没有则显示空. str[]:当索引超出当前字符长度时,则显示undefined.
- oracle的listagg函数
今天需要将 BDST_ID相同的PROJECT_ID用逗号分隔拼成一个字符串,于是想到了oracle的listagg函数 表名为PM_BDST_PROJECT select tt.BDST_ID, l ...
- elasticsearch 配置外网访问
进入 config/ elasticsearch.ym 修改:network.host: 127.0.0.1 或者内网Ip 添加:http.host: 0.0.0.0
- 《数字图像处理(MATLAB)》冈萨雷斯
<数字图像处理(MATLAB)>冈萨雷斯 未完结! 参考:数字图像处理——https://blog.csdn.net/dujing2019/article/category/8820151 ...
- C# Winform 禁止一个进程运行多次
禁止一个进程运行多次 using System; using System.Windows.Forms; namespace StartExe { static class Program { /// ...