Vue——vue router路由跳转了，但是页面没有变

最新推荐文章于 2024-03-26 23:39:24 发布
最新推荐文章于 2024-03-26 23:39:24 发布
阅读量6.9k 收藏
点赞数 1
分类专栏： Vue 文章标签： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43201350/article/details/125752406
版权

解决方案：在app.vue页面中加上router-view(很关键）

dbt@L
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VueJs路由跳转——vue-router的使用详解
10-20
本篇文章主要介绍了VueJs路由跳转——vue-router的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 同路由携带不同参数跳转无法刷新问题解决方法
m0_54070657的博客
11-28 2512
当跳转同一路由，携带不同参数时，组件会被复用，生命周期之前创建了一次，不会再次重新创建，因此页面不会刷新。方法三：当一个组件复用时，传递的参数发生变化就会触发这个钩子函数，在路由配置中使用。监听路由参数的变化，并在参数变化时手动执行相应的逻辑来实现刷新页面的效果。守卫，该守卫会在当前路由更新时被调用，可以在守卫中执行刷新页面的逻辑。属性给组件添加唯一标识，当路由参数发生变化时，通过修改。中，在需要刷新页面时，通过修改参数的值来触发刷新。来管理路由参数，在每次路由跳转时将参数存储到。方法四：可以考虑使用。
Vue3路由发生跳转，界面没有跳转的一种原因
最新发布
weixin_51470941的博客
03-26 406
Vue3路由发生跳转，界面没有跳转的一种原因
vue动态路由,三级及以上路由,地址跳转,但是页面不显示
yuzheh521的博客
12-28 1677
vue动态路由的时候,一级,二级路由都正常展示,但是三级,四级,五级等就只看到地址跳转了,但是页面并没有跳转,这种循环希望大家使用递归。
解决vue项目路由跳转页面不变问题
jiangjunyuan168的博客
05-11 2584
问题： 今天在开发vue移动端项目的过程中发现了一个bug，就是当按返回键的时候页面并没有发生变化，一开始还以为是没有监听到返回事件，但是通过测试之后发现返回事件监听成功了，路由也发生了变化，相应事件也触发了，就是页面视图没有跟着改变。 解决方法： 项目中路由设置的是 hash模式，所以对 hashchange 事件进行监听（hash模式下，路由的变化会触发hashchange事件） 在App.vue中给hashchange绑定事件： mounted() { // 检测浏览器路由改变页面不刷新问题
vue跳转，前进后退，点击浏览器的返回按钮，地址栏路由变了但是页面没跳转
H_ZMY的博客
09-04 3046
页面A—>B,B—>C,C—>B(OK),B—>A(失败)已解决。
解决vue路由发生了跳转但是界面没有任何反应问题
weixin_74285634的博客
12-13 5325
在vue中，我们使用路由（Router）来实现页面的跳转。但是有时候我们会遇到这样一种问题：点击页面中的导航链接，路由发生了跳转，但是网页的界面没有任何变化。这是什么原因呢？这通常是因为我们的路由跳转没有更新对应的视图（View）导致的。那么如何解决这个问题呢？下面，我将为大家介绍两种解决方案。
【vue-router】关于在vue3项目中使用vue-router碰到的坑(路由跳转但是页面不更新)
RanDoll_的博客
05-22 7001
首先来说第一个问题，解决思路很简单，就是在路由跳转的时候重新加载组件嘛，只需要给router-view添加一个和路由变化时相关的key就可以了，这样在渲染虚拟dom的时候算法就会判断两次的组件是有区别的，虽然看起来很简单，但是作者一开始没想到这个地方，使用了状态管理器，自定义事件等等方法，现在想来这些方法有些还是能成功奏效的，但是由于第二个问题的存在，这些问题都失败了。
解决vue3 路由切换后，页面不显示内容，刷新后正常显示（路由切换白屏的问题）
weixin_43185419的博客
06-13 9211
正常使用时切换路由都可以正常地切换页面，但是页面长时间无操作就会浮现该问题。使用导航切换路由，路由可以正常跳转，地址栏有变化，但页面不显示。在router-view 中给路由添加key标识。2、切换的各级页面均有根标签节点包裹。
vue router路由跳转了，但页面没有变
lwj1372391870的博客
06-29 4229
vue router路由跳转了，但页面没有变
vue路由跳转页面不变，可能是routes参数的原因
qq_44149057的博客
04-26 2289
我刚开始的时候没有注意，以为new Router里面的参数可以随便命名，后来才发现，原来不是的，这里面的只能传routes,如果使用其他的命名会导致路由跳转了但是页面却没有发生改变。当然导致路由改变但是页面不变可能还有其他原因，这只是其中一种可能。
Vue 页面跳转不用router-link的实现代码
08-27
主要介绍了 Vue 页面跳转不用router-link的实现代码，文中给大家介绍了vue router-link跳转传值示例,需要的朋友可以参考下
解决vue+router路由跳转不起作用的一项原因
11-20
如下所示： Vue.use(Router) export default new Router({ mode:'history', routes: [ { path: '/', component: Login }, { path: '/login', component: Login }, ...补充知识：vue-router配置后地址栏输入跳转不
vue-router跳转时打开新页面的两种方法
10-16
主要给大家介绍了关于vue-router跳转时打开新页面的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue-router具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue-router单页面路由
12-07
准备路由 new VueRouter（）； 关联路由 map 启动路由 start(App,’#box’)；//第一个参数是准备的根组件，第二个参数是要捆绑的位置就是自己定义的id中 github上vue-router下载地址：...
Vue.js实战之利用vue-router实现跳转页面
10-20
对于单页应用，官方提供了vue-router进行路由跳转的处理，这篇文章主要给大家介绍了Vue.js实战之利用vue-router实现跳转页面的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
vue 实现路由跳转时更改页面title
12-13
一、router文件夹下的index文件中给每个path添加meta:{}： export default new Router({ routes: [ { path: '/', name: 'index', component: index, meta: { title: 'title1' } }, { path: '/...
vue-router路由与页面间导航实例解析
11-30
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现...
vue-router实现webApp切换页面动画效果代码
08-30
本篇文章主要介绍了vue实现app页面切换效果实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3 vue-router 路由跳转
09-02
在 Vue 3 中，你可以使用 Vue Router 进行路由跳转。下面是一些基本的步骤： 1. 首先，确保你已经安装了 Vue Router。你可以通过运行以下命令来安装它： ``` npm install vue-router@next ``` 2. 在你的主文件（例如 `main.js` 或 `main.ts`）中导入 Vue Router 和你的路由配置： ```javascript import { createApp } from 'vue'; import { createRouter, createWebHistory } from 'vue-router'; import App from './App.vue'; import Home from './views/Home.vue'; import About from './views/About.vue'; const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ]; const router = createRouter({ history: createWebHistory(), routes }); const app = createApp(App); app.use(router); app.mount('#app'); ``` 在上面的示例中，我们创建了两个路由：`/` 对应 `Home` 组件，`/about` 对应 `About` 组件。你可以根据自己的需求添加更多的路由。 3. 在你的组件中使用路由跳转，你可以使用 `<router-link>` 组件或 `$router.push` 方法。 使用 `<router-link>` 组件： ```html <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> ``` 使用 `$router.push` 方法： ```javascript // 在方法中调用 methods: { goToHome() { this.$router.push('/'); }, goToAbout() { this.$router.push('/about'); } } // 或者在模板中调用 <button @click="$router.push('/')">Go to Home</button> <button @click="$router.push('/about')">Go to About</button> ``` 这样，当用户点击链接或按钮时，路由就会进行跳转。 这只是一个基本的示例，你还可以使用更多的 Vue Router 功能，如路由参数、嵌套路由、路由守卫等。你可以参考 Vue Router 的官方文档来了解更多信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值