【Vue3】Typescript 路由跳转失败：导航栏地址改变页面不切换

芭拉拉小魔仙

已于 2024-06-28 17:00:28 修改

阅读量376

点赞数 3

分类专栏： vue3 文章标签： vue typescript

于 2024-04-27 11:33:07 首次发布

本文链接：https://blog.csdn.net/weixin_45274678/article/details/138245349

版权

vue3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章介绍了如何通过在``中添加随机key标识解决视图重载问题，以及为何在使用div标签的@click事件进行跳转时可能导致页面不切换，并推荐使用router-link标签来修复。

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

解决方案一

router-view 添加key标识

<router-view :key="cRoute+Math.random()"/>
let cRoute = computed(() => {
  			return router.currentRoute.value.fullPath;
});

解决方案二

页面不切换可能是没有使用router-link。出现这类问题的都是在div标签上添加@click事件，进行跳转。改为使用router-link标签跳转就好了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

芭拉拉小魔仙

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue3】Typescript 路由跳转失败：导航栏地址改变页面不切换

出现这类问题的都是在div标签上添加@click事件，进行跳转。router-view 添加key标识。页面不切换可能是没有使用。
复制链接

扫一扫

专栏目录

Vue路由切换页面不更新问题解决方案

10-15

主要介绍了Vue路由切换页面不更新问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

当vue路由变化时,改变导航栏的样式方法

10-18

今天小编就为大家分享一篇当vue路由变化时,改变导航栏的样式方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

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

Vue + TypeScript 实战（二）路由详解

Yushia的博客

04-18

2815

一、路由属性配置说明 export default new Router({ mode: 'history', //路由模式，取值为history与hash base: '/', //打包路径，默认为/，可以修改 routes: [ { path: string, //路径 ccomponent: Component; //页面组件 name: string; // 命名路由-路由名称 components: {

Vue三级路由问题记录

热门推荐

Huanghuali_的博客

01-16

1万+

遇到一个问题整了一天虽然也看出是啥问题，然后我换了种访问路由的方法就是点击主页超链接还有用户模块超链接，路由改变了，但是主页的内容都不变。（忽略我的页面设计，纯属练手乱配色的） router的路由配置index.js（这边是没问题的） import { createRouter, createWebHistory } from 'vue-router' import Home from '../components/Home.vue' import User from '../components/U

在vue中实现某一些路由页面隐藏导航栏的功能操作

10-14

在Vue.js应用中，我们经常需要构建复杂的用户界面，其中包括导航栏和路由切换。在某些特定的场景下，如登录页面或全屏展示的页面，我们可能需要隐藏导航栏以提供更好的用户体验。本文将详细讲解如何在Vue中实现某些...

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

10-16

这个问题主要发生在尝试从一个具有动态参数（如`/route/:id`）的路由跳转到另一个具有不同参数的相同路由时，尽管参数已经改变，但视图内容可能保持不变。 **问题描述** 在使用动态路由`/route/:id`时，如果用户在...

vue地址栏直接输入路由无效问题的解决

10-17

在Vue.js应用中，直接在浏览器地址栏输入路由通常是可行的，但这依赖于正确的路由配置和设置。在某些情况下，可能会遇到输入路由后页面无法正确显示的问题，这通常与Vue Router的模式、历史记录管理和浏览器兼容性...

vue+element导航+标签导航+路由跳转+路由转换.zip

05-21

vue+element导航+标签导航+路由跳转+路由转换，有需要可以取，博客有详尽说明，https://blog.csdn.net/Hei_lovely_cat/article/details/104692047

vue 解决路由只变化参数页面组件不更新问题

10-16

在Vue.js应用中，路由是页面之间导航的关键组成部分。当你使用Vue Router进行页面导航时，通常情况下，当路由路径发生变化时，对应的组件也会随之更新。然而，在某些情况下，如果路由只变化了查询参数（即URL中`?`...

解决vue+router路由跳转不起作用的一项原因

11-20

在Vue.js应用中，路由是实现页面导航和组件切换的核心机制。Vue Router是官方推荐的路由库，它允许我们定义动态、嵌套路由，并提供多种导航控制方式。在这个问题中，我们将深入探讨为什么在某些情况下，`vue-router`...

解决vue 路由变化页面数据不刷新的问题

08-27

在Vue.js应用中，路由是页面之间导航的关键组成部分。然而，有时可能会遇到一个问题：当路由发生变化时，页面数据并未自动刷新。这种情况可能会影响用户体验，尤其是当你期望新路由加载时更新相应的数据。本篇文章将...

vue 实现路由跳转时更改页面title

10-16

今天小编就为大家分享一篇vue 实现路由跳转时更改页面title，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue3路由发生跳转，界面没有跳转的一种原因

weixin_51470941的博客

03-26

1152

Vue3路由发生跳转，界面没有跳转的一种原因

Vue3使用路由跳转的坑

dream_s_a的博客

12-05

1135

技术栈：Vue3+Vite 3+Vant 3错误的写法： const router = useRouter();写在方法里会报错误：正确的写法：学习vue3的链接

RouterLink设置路由跳转，页面地址已经更新但是页面没有跳转

weixin_48823116的博客

07-05

2136

RouterLink设置路由跳转，页面地址已经更新但是页面没有跳转

vue如何实现路由跳转后隐藏导航栏

04-18

Vue可以使用路由的钩子函数beforeEach，在路由跳转前判断是否需要隐藏导航栏。具体代码如下： ``` // 路由配置 const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component: About, }, { path: '/article', name: 'Article', component: Article, meta: { hideNav: true, // 隐藏导航栏 }, }, ]; // 使用beforeEach钩子函数 router.beforeEach((to, from, next) => { const hideNav = to.meta.hideNav; if (hideNav) { // 隐藏导航栏 store.commit('hideNav'); } else { // 显示导航栏 store.commit('showNav'); } next(); }); // store的mutations const mutations = { hideNav(state) { state.showNav = false; }, showNav(state) { state.showNav = true; }, }; // 导航栏组件的渲染 <template> <div v-if="showNav">导航栏</div> </template> <script> export default { computed: { showNav() { return this.$store.state.showNav; }, }, }; </script> ``` 在路由配置中，可以添加meta字段，用来存储额外的信息。通过beforeEach钩子函数，在路由跳转前判断是否需要隐藏导航栏，并根据情况修改store中的状态。在导航栏组件中，根据store中的状态来决定是否渲染导航栏。