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) ...
随机推荐
- Docker 常用命令和Dockerfile
Docker 简介 官方的解释为:Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows 机器上,也可以实现 ...
- 怎样发出一个HTTP请求
需要使用 xhr.send(); 参数为请求数据体, 如果没有就传入null, 一般来说, GET请求是不用传参的, POST就视情况而定, 理论上所有GET请求都可以改为POST, 反之则不行. v ...
- git提交项目到码云
提交代码: git initgit remote add origin 远程仓库地址git pull --rebase origin mastergit add -Agit commit -m &qu ...
- std::string与char*之临时缓冲区
std::string与char*之临时缓冲区 原文:https://blog.csdn.net/hsshh1988/article/details/80689330 c++文件读取流程如下: ifs ...
- python selenium1 模拟点击 测试对象 58同城验证码
#!/usr/bin/python# -*- coding: UTF-8 -*-# @Time : 2019/12/5 17:30# @Author : shenghao/10347899@qq.co ...
- span元素
<span>标签属于行内元素(inline),所以无法设置高度和宽度: 如果需要改变其宽高,就需要将其转变为块体元素(block)或行内块体元素(inle-block)
- web开发:Bootstrap
一.ajax请求 二.前台服务器概念 三.bs导读 四.bs引入 五.bs容器与响应式 一.ajax请求 - 后台 ```python# 通过flask框架搭建后台from flask import ...
- IDEA设置左侧边栏修改代码后变色
首先声明,此功能是基于版本控制的,不管是基于git或者是svn, 都要有版本控制方可使用. 平常情况下,IDEA左边栏是没有颜色的,如下图所示 当我们修改了代码,左侧就会有颜色显示, 右侧滚动条处也有 ...
- 配置linux ftp服务器,客户端报list remote folder fail
XFTP出现列表文件夹失败.主要是因为FTP模式不对,应该为主动连接模式, 可以在设置主机属性 - 选项页签 - 将默认勾选的“使用被动模式”(使用消极模式)的多选框取消...就可以了...
- java线程基础巩固---创建并启动线程
对于java的并发编程方面的东东,不管是面试还是实际工作开发都是非常重要的,而往往只要涉及到并发相关的东东有点让人觉得有点难,而实际工作中涉及到并发可能就是简单的用下同步块.上锁之类的一些简单的操作, ...