Vue监控路由变化以及应用

最新推荐文章于 2024-05-04 07:04:04 发布

Raaabbit

最新推荐文章于 2024-05-04 07:04:04 发布

阅读量1.7k

点赞数

分类专栏：日常踩坑

本文链接：https://blog.csdn.net/github_39457740/article/details/84781007

版权

本文介绍了在Vue应用中如何监控路由变化，以解决在同一个组件内根据路由呈现不同内容的问题。错误的方法是仅在初始化时获取路由信息，而正确的做法是利用`watch`对象监听路由变化，这允许在路由更新时做出响应，例如进行前端监控和用户操作判断。

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

Vue监控路由的应用

问题来源：

我想要实现这样的一个功能，在同一个vue组件内，根据路由的不同分别呈现出首页banner或者是搜索功能

错误的解决办法

我最初希望单纯使用

data(){
   
   return {
   
     status:this.$route.query.status||0 //0表示在，1表示进行了初步的查询
   }
 },
</

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Raaabbit

关注关注

0
点赞
踩
2

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue中监听路由参数的变化及方法

10-15

在Vue.js应用中，路由是页面之间导航的关键组成部分。当路由参数发生变化时，有时我们需要根据新的参数值来更新页面的数据。然而，Vue的生命周期方法，如`mounted`，并不会因为路由参数的改变而再次触发。这时，我们...

vue-router动态路由设置自定义首页

weixin_48494231的博客

01-09

4436

2.遇到问题点：因为首页是用户自定义的，所以在对后端请求来的数据除了需要使用递归处理成路由的数组结构还要用自定义的首页ID查询出对应的首页路由，（我这里是记录了对应的name方便后续跳转使用），最后在递归函数的末尾往动态路由再push一个路由规则，我这里写成。总结：使用了重定向以及静态路由和动态路由，之前一直想更改静态路由里面'/'的重定向，显然不合理，静态路由在初始化页面时就已经挂载好，后续更改时比较麻烦。redirect:{name:首页name}

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

若依 vue前端动态设置路由path不同参数在页面容器里打开新页面（新路由），面包屑和标签页标题根据参数动态改变，面包屑多级标题，侧边栏对应菜单亮起

坐等夕阳落time的博客

08-13

2万+

若依vue前端能跳转到新路径的方法，我暂且知道这三种形式：1 在若依的菜单项添加2 在router里添加3 直接用标签里跳转第1和第2钟做法，都是要提前声明一个路由对象，然后使用或者$router.push跳转metaTitle: row.chargeName + '的费用配置'},})第3钟做法，不用声明就可以直接跳转，但是因为你不曾声明过，所以面包屑和标签页标题是不会发生改变的。..................

vue监听当前页面路由参数变化

没有酒也没有故事。

12-28

2924

vue监听路由变化

Vue2—Echarts 相同页面、相同组件、显示不同数据

weixin_53035812的博客

11-20

234

【代码】Vue2—Echarts 相同页面、相同组件、显示不同数据。

vue 进入同一个路由参数不同数据不刷新

ziyer666的博客

05-11

381

watch:{ '$route'(to,from){ 在这里可以获取路由的信息，可以做你想做的任何事情 } }

vue在App.vue文件中监听路由变化刷新页面操作

10-14

总体来说，Vue在App.vue文件中监听路由变化刷新页面操作涉及了多个方面的技术点，包括Vue Router的使用、JavaScript的事件监听、Vue的生命周期管理以及组件间的通信。理解这些知识点有助于开发者更好地维护和开发Vue...

vue实现路由监听和参数监听

10-16

// to和from分别代表路由变化前后的路由对象 console.log(to.fullPath); // 打印新路由的完整路径 } } ``` #### 1.2 动态设置监听条件有时候，我们可能只希望在特定条件下触发路由监听，比如当路由参数发生...

vue动态路由:路由参数改变,视图不更新问题的解决

10-16

在组件中，你可以通过添加一个`watch`监听器来监控路由的变化。这样，每当路由参数发生变化时，`watch`回调函数就会被执行，你可以在其中更新你的数据或视图。例如： ```javascript watch: { '$route': function...

解决vue-router在同一个路由下切换,取不到变化的路由参数问题

12-09

通过这种方式，我们可以监控路由参数的变化，并在参数变化时执行相应的逻辑： ```javascript watch: { '$route': function(to, from) { // 这样就可以获取到变化的参数了，然后执行参数变化后相应的逻辑 console...

vue多个路由共用一个页面，路由传参不同，页面显示数据不同，并重新加载数据

smilling sky的博客

07-30

6771

1.首先在设置路由的文件设置路由信息。（我的是在index.js中设置路由） routes: [ { path: '/home/exchange/detail', name: 'detail', component: () => import ('@/pages/exchange/Exchange'),

Vue-router动态路由的使用（路由配置，传参）

wingchiehpih的博客

05-05

1431

Vue-router动态路由的使用动态路由router-link动态路由配置转载：编程让我快乐动态路由动态路由：当我们很多个页面或者组件都要被很多次重复利用的时候，我们的路由都指向同一个组件，这时候从不同组件进入一个"共用"的组件，并且还要传参数，渲染不同的数据，这就要用到动态路由跟路由传参了！ router-link router-link：　　简单来说，它是个导航器，利用to属性导航...

vue跳转到同一路由但传递参数不同，从而判断页面显示内容

weixin_48669322的博客

04-15

1480

vue跳转到同一路由但传递参数不同，从而判断页面显示内容

VUE不同路由地址跳转相同页面，页面数据根据不同参数刷新

weixin_42943626的博客

04-25

2582

VUE不同路由地址跳转相同页面，页面数据根据不同参数刷新在<script></script>标签中增加监听，当路由发生改变时，重新调用查询数据接口， export default { //监听路由变化、newVal：目标路由，oldVal:原路由，路由不同时重新请求数据 watch: { $route: function (newVal,oldVal) { console.log("oldVal:"+oldVal.name)

vue3动态路由，另类实现方法，简单操作

热门推荐

我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。

08-25

3万+

方法一：通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或 // 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal){ console.log(val); }, // 深度观察监听 deep: true } }, 或 // 监听,..

Vue中监听路由参数变化的几种方式

青春木鱼的博客

08-08

1万+

在开发vue项目的过程中，经常会对某些页面或全局项目的路由进行监听，当路由发生变化的时候去执行某些操作，因此本文总结了监听路由的几种方式

监听路由

qq_36262295的博客

11-10

1546

方法一：通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或者 // 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal){ console.log(val); }, // 深度观察监听 deep: true } }, 或者 // 监听,当路由发生变化的时

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

慕白Lee的博客

09-27

1万+

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