之前做项目时,特别是后台项目,左边都有侧边栏,我们需要做到点击某个侧边栏的项让这个项高亮,之前采用的是给每个项绑定一个值,点击某个项时,就将这个值付给一个变量,在每一项上判断这个变量是否与每项上的值相等,从而使对应项高亮,

但是最近在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监听当前路由的更多相关文章

  1. vue mounted中监听div的变化

    vue mounted中监听div的变化 <div style="width:200px;height:30px;background: #0e90d2" id=" ...

  2. Vue之数据监听存在的问题

    Vue之数据监听 当数据监听的是列表时,数据发生改变,不会被监听到. // 用$set修改数组中的数组能够被监听 // app.$set(this.hobby, 0, "爱你哦") ...

  3. Vue的watch监听事件

    Vue的watch监听事件 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  4. Vue watch 深层监听

    Vue中监听某个对象的属性 为了避免监听整个对象导致效率问题,可以监听某个对象的特定属性 watch: { 'deptModel.depts': { handler(newVal, oldVal) { ...

  5. Vue之watch监听对象中某个属性的方法

    新建 userinfo = { name: "小明",  age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...

  6. vue 在.vue文件里监听路由

    监听路由  watch   $route vue项目中的App.vue 文件 <template> <div id="app"> <!--includ ...

  7. vue路由监听及路由守卫

    路由监听: //当一个组件被复用的时候,那么路由发生变化,但是页面上面的数据不会发生变化 新建one.vue 组件 作为home的子组件,在home.vue 中写遍历渲染页面 ,并用params传参, ...

  8. vue 如何通过监听路由变化给父级路由菜单添加active样式

    1.项目需求:在项目开发中,多级菜单的情况下,勾选子菜单时,需要在父级菜单添加active样式. 2.遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact ...

  9. vue浏览器返回监听

    具体步骤如下: 1.挂载完成后,判断浏览器是否支持popstate mounted(){ if (window.history && window.history.pushState) ...

随机推荐

  1. S02_CH06_XADC实验

    S02_CH06_XADC实验 6.1实验概述 这次借助zynq的内嵌的XADC来采集zynq内部的一些参数: •VCCINT:内部PL核心电压 •VCCAUX:辅助PL电压 •VREFP:XADC正 ...

  2. 怎样快捷获取元素节点body

    1. 使用: document.body document.body.nodeName; // "BODY" 2. 使用: document.getElementsByTagNam ...

  3. springsecurity学习

    首先讲一下,没有用到数据库,然后觉得重要的就是security的配置securityConfig.class,不太会说(好像也不太会用),上图吧,也是学习狂神过来的 项目结构 大致效果 pom.xml ...

  4. Python诞生以来意义菜谱

    自Python诞生以来,它被誉为最简单的编程语言.进入人工智能时代后,它逐渐成为编程领域的主导语言. Python是一种快速.强大.高效和灵活的编程语言家常菜做法大全.学习后,无论您是想进入数据分析菜 ...

  5. HTML的标签简单概括

    段落标签 <p></p> 属性  说明 值 align 对其方式 left(默认).right.center 水平线 <hr /> 属性  说明   值 width ...

  6. Google自动打印

    浏览器打印功能,有很多小伙伴可能不太清楚,这里我们可以学习一下. 情景:开发一个需要打印小票的项目.(在订单页里,给客户添加一个打印的操作) 1.假设打印机已经连接好了 2.我们这一节用的浏览器是Go ...

  7. 【Struts2】文件上传与下载

    一.上传 1.1 Struts2实现步骤 浏览器端 服务器端 1.2 关于Struts2中文件上传细节: 1.3 示例 jsp文件 Action类 struts.xml文件配置 二.下载 2.1 文件 ...

  8. 【python】多进程、多线程、序列

    一.多进程 1.子进程永远返回0,而父进程返回子进程的ID.这样做的理由是,一个父进程可以fork出很多子进程,所以,父进程要记下每个子进程的ID,而子进程只需要调用getppid()就可以拿到父进程 ...

  9. linux基础4-压缩及其相关的命令

    一 压缩的原理以及gzip.bzip2.tar三个命令的: Linux下文件的压缩与打包 二 zip.zipinfo.unzip: zip:压缩成.zip文件 zipinfo:列出压缩文件信息

  10. 二:MVC之LINQ查询语法

    LINQ(Language Integrated Query)语言集成查询是一组用于c#和Visual Basic语言的扩展.它允许编写C#或者Visual Basic代码以操作内存数据的方式,查询数 ...