avatar

麦兜的小站

MDO.INK

  • 首页
  • 随笔
  • 知识库
  • 归档
  • 动态
  • 标签
  • 关于
Home vue3中当路由一样,参数quary不一样的跳转
文章

vue3中当路由一样,参数quary不一样的跳转

Posted 2025-02-11 Updated 2025-02- 11
By power 已删除用户
2~2 min read

当路由的path都是一样的,quary不一样,在跳转的时候,不会执行onMounted等方法,页面也就不会刷新。

解决方法

  1. 修改router-view,在app.vue页面给标签加key,当key不同时,就会刷新。
    完整代码片段如下,记得return出去route不然报错。
`<template>
  <router-view :key="route.fullPath"></router-view>
</template>
<script>
import { useRoute } from 'vue-router'
  setup() {
    const route = useRoute()
    return {
      route
    };
  }
</script>` 
  1. 在watch中监听路由的变化,更新页面
`<script>
import { useRoute } from 'vue-router'
import {onMounted, watch } from 'vue'
  const route = useRoute()
  watch(route, (newValue, oldValue) => {
    console.log('watch 已触发', newValue, oldValue)

  })
</script>` 

两个方法都成功了,个人建议选择第一个,更方便快捷

前端
License:  CC BY 4.0
Share

Further Reading

Jun 25, 2025

Vue实现顶部导航跟随页面联动效果

需求背景 最近也是应我一位同学的要求,给他的公司制作一个官网,那也就是拾起了一些基础的知识,搜索了一些其它的文章有实现这种效果的,但大多导航都是在侧边,然后点击导航对应的部分内容滑到最上面,跟我这次设...

Jun 20, 2025

Share.js - 一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点

一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等社交网站,使用字体图标。 有两种安装方式: 使用npm npmi...

Jun 19, 2025

node express实现热更新

在使用node进行开发的时候,每次修改文件,都需要重启express服务很麻烦 我们可以使用nodemon这个库,修改文件后可以自动重启express服务。 安装: npminstall--save-...

OLDER

PHP 接口限流实现方法

NEWER

Notification in Browsers

Recently Updated

  • 如何实现接口幂等性
  • 10个npm工具包
  • How to set up PHP7.4 on MacOS.
  • Automa:一键自动化,网页数据采集与工作流程优化专家Automa:解锁自动化
  • Mac 下用 brew 搭建 LNMP

Trending Tags

thinkphp clippings

Contents

©2025 麦兜的小站. Some rights reserved.

Using the Halo theme Chirpy