vue项目 watch之 $route

最新推荐文章于 2023-09-27 10:45:48 发布

热爱°可抵岁月漫长

最新推荐文章于 2023-09-27 10:45:48 发布

阅读量1w

点赞数 3

本文链接：https://blog.csdn.net/weixin_46337813/article/details/116100917

版权

该博客介绍了如何在Vue的登录页面中使用watch监听$route对象，实时获取并处理登录后应跳转的先前页面路径。通过设置immediate为true确保在组件加载时立即执行回调，从而实现平滑的导航体验。

摘要由CSDN通过智能技术生成

vue 登录页面使用立即监听$route的方式，得到登录后跳转会的路径

  watch: {
    $route: {
      handler: function (route) {
        console.log("跳转回参数页面", route.query.redirect);
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

热爱°可抵岁月漫长

关注关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue监听路由--案例详解

weixin_43117402的博客

04-24

951

有时我们需要对路由的变化进行监听，比如官网展示所有课程的页面：当页面头部的标签切换时，路径也会发生变化，我们需要监听路由变化来改变标签的样式，或者在页面中加载对应的内容。那么怎么监听路由呢？监听路由 $route 的变化监听路由变化我们需要用到两个知识：vue 中的 watch 和 $route。 watch 即数据变化监听，$route 即当前路由。路由监听写法如下： watch: ...

watch 监听 “$route.query“ 页面离开的时候也会执行如何处理

最新发布

Sherry Tian的博客

08-26

279

今天在开发项目中发现一个bug，因为我在search页面使用了watch监听了路由参数的变化，在切换页面到其他页面的时候，发生了一个弹框null，这是调用接口报错的提示信息。就是上面这段代码，让我尴尬的不行，应该还有其他更好的解决方案，先记下来，后续研究了再来更新。尴尬啊，没遇见过这种情况，记录下。

参与评论您还未登录，请先登录后发表或查看评论

使用watch监听路由变化和watch监听对象的实例

01-21

一、watch监听路由变化解决办法： export default{ data(){ return{} }, watch:{ $route:getPath // 监听事件 }, methods:{ getPath(){ let path = this.$roune.path; //或得当前路径进行逻辑判断 } } } 二、watch监听对象例子： <el v-model=form.region placeholder=请选择> <el-option v-for=item in rootCategory :key=item.id

vue.js使用watch监听路由变化的方法

10-18

主要介绍了vue.js使用watch监听路由变化的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

vue项目 watch之 $route 路由立即监听

u012174809的专栏

12-21

7177

有这样一个需求，一个vue页面，可能会被多个入口进去，并更新最新数据,用created是达不到效果的，只有第一次页面加载时created才执行，除非关掉页面再打开，即可第二次加载也执行，那有没有不关闭页面，直接代码监听路由呢。有 watch: { $route: { handler: function(route) { console.log('comin channel-edit') this.initScreen() },

watch监听（vue路由参数$route）

niangfan0788的博客

03-30

559

【代码】watch监听（vue路由参数$route）

Vue 中使用watch监听$route 无效问题

热门推荐

qq_42946917的博客

05-17

2万+

Vue 中使用watch监听$route失效问题！今天在项目操作中发现一个问题，在watch里面监听$route变化，发现并没有监听到，查阅了一些资料最终解决，现写出与大家共同分享，也忘出现此问题的同学也能顺利解决。路由词典： { name: 'secondUser ', component: secondUser, path: '/secondUser...

2022-02-09 面试题:vue(三) $router和$route的区别,computed和watch的区别

GAARA

02-09

397

1.$router和$route的区别? 回答 $router是VueRouter的实例,相当于一个全局的路由对象里面包含很多个属性和子对象,比如history,和常用的跳转链接this.$router.push $route对象表示当前的路由信息,包含了当前URL解析得到的信息,包含当前的路由,参数和query对象等等补充 1.$router常用api: ① this.$router.push('hash 地址') 跳转到指定 hash 地址，并增加一条历史记录 ② this.$router.go

vue this.$route和this.$router到底有什么关系！

qq_36818931的博客

12-31

968

文章目录前言一、vue中this.$route是什么？二、vue中this.$router是什么？三、二者的区别与联系总结前言一、vue中this.$route是什么？ vue中this.$route是组件内的路由对象，包含我在控制台打印了this.$route 可见this.$route具有以下属性：属性名属性类型属性说明示例 fullPath string 完成解析后的 URL，包含查询参数和 hash 的完整路径 hash string 当前路由的 h.

vue监听$route

Nikki_u的博客

03-27

690

App.vue <router-link to="/detail/1">detail1</router-link> <router-link to="/detail/2">detail2</router-link> <router-link to="/detail/3">detail3</router-link>  <router-view></router-view> D

vue-router watch $route

素钗一生推

04-28

6010

在父组件引入的后代子组件中，内中有多层子孙组件的话，this.$router.push相关的操作还是得免除掉，坑有些多子组件直接跳转父组件强制刷新页面访问路由，created事件无法触发，熟记v-on, this.$emit,this.$ref.child.method ...

vue2中watch监听$route的变化

06-12

在 Vue2 中，可以使用 `$route` 对象来监听路由的变化。可以通过 `watch` 属性监听 `$route` 对象的变化，例如： ```javascript watch: { '$route': function (to, from) { // 路由变化时的操作 } } ``` 在 `$...

vue 路由监听的方式

coldriversnow的专栏

08-25

1571

【代码】vue 路由监听的方式。

【Vue】监控路由与路由参数, 刷新当前页面数据的几种方法

慕白Lee的博客

09-27

1万+

在这个示例中，我们在组件的`data`选项中定义了一个`monitoredParam`属性，用于存储监控的参数值。当监控的参数发生变化时，`watch`函数会被触发，将新的参数值保存到组件的`monitoredParam`属性中。在这个示例中，我们在组件的`data`选项中定义了一个`monitoredRoute`属性，用于存储监控的路由信息。当路由发生变化时，`watch`函数会被触发，将新的路由信息保存到组件的`monitoredRoute`属性中。

Vue watch $route时的箭头函数

许珊珊同学的专栏

05-06

693

和function不同之处

vue监听路由方式

xiaomingzi_12345的博客

06-30

2512

【代码】vue监听路由方式。

watch监听路由信息

qq_40860137的博客

06-27

3690

①在watch函数中监听$route ②to表示将当前所在路由信息, from表示从哪跳转到路由信息

Vue Router的Watch

lihui61357457的博客

12-05

1155

详情可见 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>67-VueRouter-Watch属性</title> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> &

vue路由参数监听（watch监听route参数）

qq_17627195的博客

11-09

8804

watch: { // 根据情况 $route.query 可以换成 $route.params "$route.query": { immediate: true, // 第一次的数据，也要当做是一种变化 // 处理函数（不能修改名字） handler('新的值'，'旧的值') handler(new_value, old_value) { // 执行代码部分 }, }, } ...