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) ...
随机推荐
- 14.shell脚本学习
简单的执行跟踪,会使得Shell显示每个被执行到的命令sh -x delete.sh 查找与替换grepsed -i "s/t_rs_customer/t_rs_customer_bak/g ...
- 关于BIOS系统的认识和学习(源自摘录)
BIOS系统的介绍与学习 BIOS (basic input output system 即基本输入输出系统)在计算机系统中起着非常重要的作用,其是计算机系统最底层的设置, BIOS设置程序是被固化到 ...
- Python 流程控制与循环体
Python 的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言的一种继承.Py ...
- vue项目build 之后,css文件加载图片或者字体文件时404的解决。
ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为css单独配置 publicPath . 对于用 vue-cli 生成的项目,di ...
- 我的第一个python web开发框架(2)——第一个Hello World
小白中午听完老菜讲的那些话后一直在思考,可想来想去还是一头雾水,晕晕呼呼的一知半解,到最后还是想不明白,心想:老大讲的太高深了,只能听懂一半半,看来只能先记下来,将明白的先做,不明白的等以后遇到再学. ...
- 怎样创建一个canvas画布环境
1. 由于canvas画布在网页中, 所以需要在html中添加canvas标签: <!DOCTYPE html> <html lang="en"> < ...
- 10-MySQlL DBA笔记-基础知识
第四部分 运维篇 首先来了解一下数据库的定义,数据库是高效的.可靠的.易用的.安全的多用户存储引擎,我们可以通过它访问大量的持久化数据.我们管理和维护数据库,本质上也是要确保如上的特性,尽可能地保证数 ...
- AngularJS-01.AngularJS,Module,Controller,scope
1.AngularJS 一个构建动态Web应用程序的结构化框架. 基于JavaScript的MVC框架.( MVC ---- Model(模型).View(视图).Controller(控制器) ) ...
- windows服务与log4net应用
有时候我们需要用到window服务来执行定时任务,然后配合log4net记录程序运行情况,这里简单记录下配置的整个过程以及注意要点: 一.添加windows服务 1.设计页面,右键添加安装程序
- 有趣的"=="与"==="
console.log([]==![]);//true //"=="会进行类型转换,转换成统一类型进行比较 // !符号优于==,[]boolean值为TRUE,所以![]就是FA ...