-
vue watch 监听不到变化_vue watch 监听路由变化
2021-01-17 03:18:47首页列表页购物车会员中心import store from "../../store"import { mapState, mapActions } from "vuex"export default{// vue使用props动态传值给子组件里面的函数用props:['floorTitle'],data(){return{active: 0...首页
列表页
购物车
会员中心
import store from "../../store"
import { mapState, mapActions } from "vuex"
export default{
// vue使用props动态传值给子组件里面的函数用
props:['floorTitle'],
data(){
return{
active: 0
}
},
created(){
this.changeTabActive()
},
watch:{ // 当数据发生改变的时候再赋值
// floorData 监视的对象
},
computed: {
...mapState({
items: state => store.state.shopcart.items,
totalNumber: state => store.state.shopcart.totalNumber,
totalMoney: state => store.state.shopcart.totalMoney,
itemCount: state => store.state.shopcart.itemCount
})
},
updated(){
this.changeTabActive()
},
methods:{
changeTabbar(active){
console.log(active)
switch (active) {
case 0:
//使用name跳转,因为路径有时候会改变,这样就需要改编程式导航,比较麻烦
this.$router.push({name:'Main'})
break;
case 1:
this.$router.push({name:'goodsList'})
break
case 2:
this.$router.push({name:'cart'})
break
case 3:
this.$router.push({name:'user'})
default:
break;
}
},
changeTabActive(){
this.nowPath=this.$route.path //vue提供的方法
if(this.nowPath=="/shoppingMall"){
this.active=0
}else if(this.nowPath=="/goodsList"){
this.active=1
}else if(this.nowPath=="/cart"){
this.active=2
}else if(this.nowPath=="/user"){
this.active=3
}
}
},
watch:{
'$route': 'changeTabActive'
}
}
-
vue 监听路由变化
2020-11-03 16:45:31监听一级路由:路由组件的渲染区域为router-view,作为顶层出口,它将匹配到的路由组件渲染在该区域中,路由组件渲染默认的方式是销毁 - 创建,因此$watch是监听不到一级路由的变化的。所以,要想使用$router监听一...- watch监听:
- 监听一级路由:路由组件的渲染区域为
router-view
,作为顶层出口,它将匹配到的路由组件渲染在该区域中,路由组件渲染默认的方式是销毁 - 创建,因此$watch
是监听不到一级路由的变化的。所以,要想使用$router
监听一级路由,需要让组件成为复用组件,也就是使用keep-alive
包裹router-view
。<keep-alive> <router-view /> </keep-alive> watch: { $route: { handler(to,from) { if(from && (from.name === 'adoptSelect')){ this.active = 2 } }, deep:true, immediate: true } }
- 监听子路由:需要在有子路由的情况下,才能在当前组件监听到子组件的路由变化,直接使用下面的方式即可。
watch: { $route(to,from){ ... } }
- 监听一级路由:路由组件的渲染区域为
- 路由导航守卫:
//不能获取组件实例 `this`,因为当守卫执行前,组件实例还没被创建 beforeRouteEnter(to,from,next){ if(from.name !== 'adoptDetail'){ next({ path:'/adopt' }) }else{ next() } }
- watch监听:
-
vue watch 监听不到变化_vue2.0 router内watch监听不到route变化?
2020-12-24 10:17:47简单的两个路由,就无法监听到路由变化,不知道怎么回事var router = new VueRouter({routes: [{name: 'home',component: {template: 'test home',watch: {'$route': function(route) {// 监听不到变化?...简单的两个路由,就无法监听到路由变化,不知道怎么回事
var router = new VueRouter({
routes: [{
name: 'home',
component: {
template: '
test home',watch: {
'$route': function(route) {
// 监听不到变化??
console.log('home', route);
}
}
},
path: '/',
}, {
name: 'test',
component: {
template: '
home test',watch: {
'$route': function(route) {
// 监听不到变化??
console.log('test', route);
}
}
},
path: '/test'
}],
});
new Vue({
el: '#app',
router: router,
watch: {
'$route': function(route) {
//可以监听到变化
// console.log('watch', route);
},
}
});
-
vue路由监听不到怎么办?
2020-06-20 18:10:20vue有时候监听不到路由变化怎么办?最近在使用vue项目的时候发现我们使用的watch监听不到$route的变化,查了很多文档最终终于找到解决办法。方法一:路由包含子路由方法二:监听$route.path对象方法三:使用vue自带...vue有时候监听不到路由变化怎么办?
最近在使用vue项目的时候发现我们使用的watch监听不到$route的变化,查了很多文档最终终于找到解决办法。
方法一:路由包含子路由
{ name: 'home', component: Home, path: '/home', children: [ { path: 'main', name: 'main', component: Main, }, { path: 'login', name: 'login', component: Login, }, ] }
在几个子路由之间跳转就能保证监听到路由变化
方法二:监听$route.path对象
watch: { "$route.path":{ handler(to, from) { console.log('to:::', to); console.log('from:::', from); }, deep: true } }
如果我们的路由没有子路由,想要实现监听可以使用$route.path进行深度监听,这样也能监听到路由变化了。
方法三:使用vue自带的路由守卫beforeRouteEnter ,beforeRouteUpdate ,beforeRouteLeave
beforeRouteEnter (to, from, next) { next(vm => { // 通过 `vm` 访问组件实例 }) }, beforeRouteUpdate (to, from, next) { }, beforeRouteLeave (to, from, next) { }
据说还能通过设置keep-alive来保证路由被监听到,这个我最近还没用的,有用过的小伙伴可以分享一下。
-
vue路由参数发生变化,但是页面不刷新的问题(vue监听路由参数变化重新渲染页面)
2019-03-14 14:35:56例: 地址1:... ... 问题现象:当从第一个调到第二个地址时,页面内容不进行刷新,依然停留在地址1的内容,但是地址栏会变化为地址二。 解决方式:vue 的key htt... -
vue监听路由
2019-03-17 18:58:22watch:{ ... //侧边栏不能进行高亮变动,所以需要监听路由变化,将当前类的变动的类i名加入到组件 this.activeClass = to.path.slice(1) } } 第二种监听方式, watch:{ $route:{ deep:true, ... -
vue 路由跳转到本页面,ts 监听路由变化
2019-10-02 19:15:35@Watch('$route') routechange(to: any, from: any) { ...//参数不相等 if (to.query.name!=from.query.name) {//todo } } 转载于:https://www.cnblogs.com/qiufang/p/11593865.html... -
Vue watch监听路由不生效,没反应
2021-02-05 10:28:03直接上代码: ... immediate: true, // 一旦监听到路由的变化立即执行 handler(to, from) { console.log("监听路由:" + JSON.stringify(to.name)); }, }, } 这样监听路由就能解决问题! ... -
vue 监听窗口变化对页面部分元素重新渲染操作
2020-12-28 16:57:44用vue-router重新路由到当前页面,页面是不进行刷新的 采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 使用 v-if 重新渲染部分组件或容器 需要重新渲染的内容 ... vue... -
vue 中 如何 监听 窗口变化 做出页面自适应 解决 路由缓存无效
2019-11-28 15:42:501.废话不多说直接上代码 ,即复制即用 ... 1.1需要注意的是 要放到 mounted 里面 不要放到 created 原因的话 去看 vue 的生命周期钩子 data() { return { _page: '', _rights: [], screenHeight: ... -
vue路由跳转子组件_vue路由跳转不刷新
2020-12-24 15:40:29在'game-detail'页面执行this.$router.push()方法,跳转到'game-detail',页面不刷新。...但是可以在watch里监听$route,监听到id的变化。后来我就在watch里边监听路由,点击后……重新调用了获取页面数据的methods... -
vue中的watch监听数据变化及watch中各属性的详解
2021-01-19 20:40:41首先确认 watch是一个对象,一定要当成对象来用。 对象就有键,有值。 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化。或者是data中的某个变量。...(一般监听时是不能监听到对 -
vue路由入门
2019-04-19 11:31:21监听url的变化,在变化前后执行响应的逻辑。 使用的步骤:①提供路由配置表,不同url匹配不同的组件配置 ②初始化路由实例 new VueRouter() ③挂载到Vue实例上 ④提供路由占位,用来挂载URL匹配到的组件 配... -
vue路由杂谈
2020-10-13 20:51:24使用vue做单页面网站 ,路由的配置是必不可少的,我们需要配置路由 使用use 注册到vue的实例里面 其实,也就是执行了install的方法,也因为这样我们可以给vue写很多插件, 路由有hash 与history 一个是带#号一个是不... -
Vue中的路由守卫
2020-03-29 22:23:14在某些情况下,当路由跳转前或跳转后、进入、离开某一个路由前、后,需要做某些操作,就可以使用路由钩子来监听路由的变化 全局路由钩子: //进入到某个路由组件之前 router.beforeEach((to, from, next) => { /... -
VUE-从添加界面返回原页面时,新增数据自动刷新,使用监听路由来实现监听缓存数据
2019-07-23 14:20:53功能简介: 1、主页面路径mainpage、添加界面路径addpage 2、默认显示全部tab,...2、当路由变化时,判断缓存数据是否变化,变化则触发下拉刷新事件;否则,不进行任何操作 实现步骤: 1、在添加界面,点击提交按... -
vue之路由守卫
2020-04-05 22:30:51在某些情况下,当路由跳转前或跳转后、进入、离开某一个路由前、后,需要做某些操作,就可以使用路由钩子来监听路由的变化 二、路由守卫实现方式 //通过路由钩子绑定事件 全局路由钩子: //进入到某个路由组件之前 ... -
Vue 前端路由 vue-router
2017-12-21 16:43:00前端可以监听url变化;前端可以解析url并执行相应操作。 前后端分离:后端只提供API来返回数据,前端通过ajax获取数据后,在通过一定的方式渲染到页面上。 SPA:前后端分离+前端路由。 SPA只有一个html文件,... -
在Vue中监听storage(全局封装使用)
2020-02-18 16:05:41重点:如何做到在保存数据的同时,可以在另一个路由中监听到数据的变化并且执行相应的操作。 基本步骤: 1. 封装全局监听方法:在main.js中给Vue.protorype注册全局方法。约定监听的sessionStorage的值为... -
如何监听vue-router的beforeEach
2019-10-24 16:13:23在处理到屏幕首屏性能时遇到了需要监听路由变化的问题,过程还好,没那么难受 首先确定了单页应用无刷新首屏性能监听方案(这里不展开讲,注意下“无刷新”,刷新的情况可以直接用performance) 其次在全局监听... -
vue $watch监听属性之 监听函数 handler() 以及 immediate:true立即执行
2020-10-12 20:19:55例如:点击路由,跳转的时候传递参数,监听到参数变化实现动态切换路由样式 immediate:true 立即执行 :当刷新页面时会立即执行一次handler函数 使用场景: 不加immediate:true 在tab切换时,你已经选中了2-1,当你刷新页面... -
vue-route路由跳转同一页面时数据不会更新
2020-11-27 15:15:07vue-route路由跳转同一页面时数据不会更新 1.问题描述 比如从www.shm.com/album/info/511跳转到www.shm.com/album/info/512页面时,数据不更新 2.解决办法 只需在watch中监听$route的变化即可 watch: { $... -
解决vue-route路由跳转同一页面时数据不会更新问题
2019-09-27 17:01:35解决vue-route路由跳转同一页面时数据不会更新问题 1.问题描述 比如从www.shm.com/album/info/511跳转到www.shm.com/album/info/512页面时,数据不更新 2.解决办法 ,只需在watch中监听$route的变化即可 watch: { $... -
VUE路由传值页面没有实时更新怎么解决?
2020-03-11 20:17:53vue路由传值页面没有实时更新怎么解决?...在本路由里面跳转到本路由上,只要路径不发生变化,在mounted()中是监测不到的,因为mounted()在组件创建时只执行了一次, 我们需要进行路由监听: 这样通过 val.que... -
vue解决方案 | router-view路由切换时页面不刷新
2020-07-22 15:37:221.将原本写在mounted里初始化数据的代码封装到init()方法中 init(){ //页面初始化时获取路由参数,访问接口获取数据等操作 ...3.使用 watch,监听路由,一旦发生变化便调用init()方法 watch: { '$route': -
【vue回顾系列】08-关于watch监听的小小总结
2021-01-24 21:18:43文章目录概念怎么写初始化监听深度监听监听data状态监听某个具体的状态监听路由的变化监听整个路由只监听个别参数监听计算属性监听props的数据 概念 用于监视某个状态的改变,是在视图层更新之后,监听的值改变了,... -
请教各位vue大神们,如何在router-view上监听transition的结束(vue1.x版本)
2020-12-28 00:59:30而且如果是<code>/foo/:id这种路由里面只是id变化时,因为是同一个组件,也是没有transition的,所以问题变得很复杂。 目前我增加了许多逻辑用来判断是否是直接进入的<code>/foo/:id的和以及从... -
vue vue-router 同一个页面地址栏参数改变,页面不刷新的问题
2019-07-03 11:35:31vue-router 同一个页面地址栏参数改变(比如文章的发布和编辑是同一个页面),不会触发vue...监听路由变化,把初始化的方法重新写到监听的方法里面执行 2、给router-view加个唯一的key,来保证路由切换时都会重新... -
vue-router 使用query传参跳转了两次(首次带参数,跳转到了不带参数)
2019-09-28 12:00:59问题: 在做项目的过程中,使用query传参数,发现跳转过程中第一次有参数,但是路由马上又跳转了一次,然后 ?和它之后的参数都不见了 问题分析: ...watch:{ //监听路由变化 '$route.path':...
-
MySQL 索引
-
漫画算法-学习笔记(11)
-
王力安防首次公开发行股票招股说明书.pdf
-
chromedriver2019.rar
-
2014年重庆理工大学《局域网技术与组网工程》期末考试试卷.pdf
-
Java IF的多选择和嵌套结构 -04天 学习笔记
-
基于SSM实现的房屋租赁系统【附源码】(毕设)
-
MySQL 多实例安装 及配置主从复制实验环境
-
Navicat Premium.rar
-
基于java实现的c++动态链接库调用案例
-
树莓派使用pwm控制风扇
-
VC实现teechart时间轴自右向左推移-C++代码类资源
-
2014年重庆理工大学《计算机网络安全》期末考试试卷.pdf
-
2014年重庆理工大学《RFID原理与应用开发》期末考试试卷 .pdf
-
linux连接wifi
-
MySQL 多平台多模式(安装、配置和连接 详解)
-
C和C++课程
-
第一次云服务器部署
-
2021/03/03学习总结
-
CentOS7安装Python3环境(无需修复yum命令)