vue-router 复用原有页面 不会加载

最新推荐文章于 2024-05-09 09:09:41 发布
最新推荐文章于 2024-05-09 09:09:41 发布
阅读量912 收藏 3
点赞数 1
分类专栏： vue实践 vue-router
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41296616/article/details/90377373
版权

vue-router 复用原有页面 不会加载

有的时候  我们在使用 v-router时候  只是修改 params或者query参数值的时候 页面不会重新加载  因为路由是一样的规则 vue则会认为是一样的页面  然后就是复用该页面  而不是 重新加载   导致  我们在 生命周期钩子 如 created 、mounted中 调用一些方法 等 不起着用    这个时候 我们就需要使用  vue中 监听 watch 了

 

我们来 监听路由值得变化  如果变化了 我们就加载 需要加载的方法等 如下所示：

 

小马哥的天涯
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
weixin_42259094的博客
01-15 7215
首先在store中定义所需要的变量可以进行初始化，再定义一个方法，登录成功后A页面，跳转到B页面之前，需要直接调用store中存储数据的方法，全局可以使用，顺序是，先调用store中的数据，其次调用sessionStorage和localStorage中的数据。这样的话，可以避免A页面跳转B页面时候，手动刷新才显示信息。直接登录成功后，直接调用store的方法，把值存储进去，B页面可以直接显示用户...
Vue页面中使用this.$router.replace访问同一页面，数据不刷新的问题
qq_39182029的博客
05-13 9828
Vue页面中使用this.$router.replace访问同一页面，数据不刷新的问题 问题原因： vue路由切换实际是组件间的切换，在我的详情页中，钩子方法使用的是created()方法，在不强制刷新或者重启时只会创建一次，所以引用相同组件的时候，页面数据就无法刷新。 我的解决方法： 方法1.在详情页添加一个watch监听路由变化（不推荐，每次返回时会刷新一次列表数据，用户体验不好） watch：{ '$route' (to,from){ this.$router.go(0); } } ​
解决新增或者编辑后vueRouter跳转不刷新页面的问题
最新发布
qq_45160662的博客
05-09 448
【代码】解决新增或者编辑后vueRouter跳转不刷新页面的问题。
vue-router页面加载不出来
唯爱浅浅waqq914的博客
10-11 5044
vue-router页面加载不出来 代码： import VueRouter from 'vue-router' import routers from './routers' Vue.use(VueRouter) const router = new VueRouter({ mode: 'history', routers })   原因： routes：不是ro...
本地vue-router模式设置为mode:‘history‘时，页面空白，无法加载
newBunny的博客
11-30 1964
router 配置模式的地方，加一行代码 base: process.env.BASE_URL const createRouter = () => { return new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes: [] }) } 酱婶er，即可
VueRouter 同一个路由（复用同一个组件） 页面不重新加载解决办法
吴冬雪的博客
12-07 3828
【代码】VueRouter 同一个路由（复用同一个组件） 页面不重新加载解决办法。
使用this.$router.repalce()/this.$router.push()/this.$router.go(n)跳转列表页，页面无刷新解决方法
weixin_47389477的博客
04-05 1958
前言 前两天做了个新增页面（之前都是用弹窗实现新增数据功能，现在使用路由跳转新增界面），但是出现一个问题，我新增内容通过接口，新增成功并返回列表页，但是列表页页面没有刷新（因此：在跳转相同组件不会触发vue的视图更新。） 尝试方法一（不可行） 使用一个中间页面作为媒介，（原本由A（新增页）页面跳转B（列表页）页面，现在加个C（媒介页）页面，新的跳转是由A到C再到B）发现这样并不能使页面刷新，因为首先看到的是列表页，点击A中的新增按钮显示B，点击B返回A时，路由里面应该是由路由history记录，发现路由没变
vue3-admin-template
04-18
Vue-Router 是 Vue.js 应用的官方路由库，Vue-Router 4.0 对其进行了升级，以适应 Vue 3.0 的变化。新版本引入了更简洁的路由定义方式，如用对象字面量表示路由配置，并支持命名视图和嵌套路由。同时，4.0 版本改进...
vue-cli3.0实现一个多页面应用的历奇经历记录总结
10-15
1. 在 `src` 文件夹下为每个页面创建一个独立的文件夹，比如 `admin` 和 `front`，每个文件夹包含 `App.vue`, `main.js`, 和 `router.js` 文件。 2. 在 `src` 文件夹下新增 `vue.config.js` 配置文件，用于配置多...
Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版
04-03
Vue Router是Vue.js官方的路由管理库，用于在单页面应用中管理导航和页面状态。在Vue3中，它可以与Composition API无缝集成，使得路由守卫、懒加载等功能的实现更加简洁。通过定义路由配置，开发者可以轻松地创建...
vue构建单页面应用实战
08-30
Vue.js 构建单页面应用(SPA)是一种现代Web开发技术，它允许开发者在一个HTML页面上加载所有必要的资源，然后通过路由和组件的切换来更新视图，而不是传统的页面重载。这种技术在提高用户体验方面表现出色，因为它...
以vue框架改写原先的博客
08-12
本项目旨在将原有的博客应用改写为基于Vue.js的版本，以利用Vue的优势，提升用户体验和开发效率。 在改写过程中，我们需要理解Vue的核心概念和特性： 1. **Vue实例**：Vue应用始于创建一个Vue实例，它是整个应用的...
vue路由this.route.push跳转页面不刷新
felix
07-26 766
Vue路由this.route.push跳转页面不刷新 一、背景 介绍：在vue项目开发中，使用路由进行页面跳转时，路由所跳转的页面不进行刷新。也就是vue生命周期函数没有执行(created、mounted钩子函数)。 案例： A页面： B页面： 问题： 当在A页面第一点击按钮到B页面时，一切正常，当返回到A页面再次点击按钮时，B页面没有执行mounted钩子函数，结果导致mounted函数中查询方法不执行。 二、解决方法： 1、使用activated:{}周期函数代替mounted:{}函数即可。 2、
如何解决进入路由时候数据不刷新的问题
weixin_42632642的博客
12-24 290
只需要在watch中添加 watch:{ ‘$route’(to,from){ this.inbound(); } },
Vue 解决路由跳转页面不刷新的问题
grootbaby
08-19 4654
Vue 解决路由跳转页面不刷新的问题 问题： 通过路由传参跳转界面，页面没有刷新 （或者跳转同一个页面，页面不刷新） （或者 this.$router.replace || this.$router.push 路由跳转不刷新） 解决方法： 在 router-view 中加 :key="$route.fullPath" <router-view v-wechat-title="$route.meta.title" :key="$route.fullPath" v-if="$route.m
Vue路由跳转传值的时候url刷新但页面内容不刷新的解决办法
qq_37533576的博客
07-13 731
路由传值方式 jump(id) { this.$router.push({ path: '/About', query: { id: id } }) }, 路由配置 { path: '/about', name: 'About', component : About } 此时通过jump方法进行路由传值的时候页面url会更新但是页面的内容不会更新
手动改变路由的值，页面不刷新 Avoided redundant navigation to current location
weixin_49210760的博客
03-17 409
1.功能需求 一个列表点击不同的项，请求不同的数据，同时会改变页面路由的参数，这样手动刷新的时候就可以直接从路由取值了 2.方法 使用的是路由的replace 或者 push ，把路由设置为当前路由 querty为没次改变的参数 但是这样会在控制台保一个错误 Avoided redundant navigation to current location 首先这个错误不会影响你的功能使用，因为这个表示你又导航到当前理由了 如果项解决的话可以用一下方法 const originalPush = VueRou
【vue】this.$router.replace跳转不起作用 Router push or replace not working
weixin_45650440的博客
03-11 6870
项目场景： 商城APP底部导航切换对应页面 问题描述 提示：这里描述项目中遇到的问题： Just sit there clicking the home btn watching log show me /home but never getting there… export default { name: 'TabBarItem', props: { path: String }, } methods: { itemClick () {
vue 使用this.$router.replace、this.$router.go、this.$router.push 等进行页面跳转不生效
絮落锦乡的博客
03-27 8463
一、问题描述 vue 在使用页面跳转的时候，发现页面总是不调转，或者地址变了，页面不刷新等问题 二、解决方案 1、排查页面是否使用了beforeRouteLeave ，如果使用了该函数，意味着路由被拦截下来进行处理了，这个时候做完逻辑处理后必须要加上 next() 函数，才能让路由继续跳转，否则页面将不会跳转。 2、排查页面是否报错，哪个方法未定义。 3、检查路由配置是否正常。 ...
vue-router如何实现路由懒加载
04-02
在使用 Vue.js 进行项目开发时，通常会使用 vue-router 进行路由管理，而路由懒加载则是一种优化方式，可以在减少页面加载时间的同时，提高用户体验。下面是实现路由懒加载的方法： 1. 安装 babel-plugin-syntax-dynamic-import 在使用路由懒加载前，需要先安装 babel-plugin-syntax-dynamic-import 插件，可以通过以下命令进行安装： ``` npm install --save-dev babel-plugin-syntax-dynamic-import ``` 2. 修改 .babelrc 文件 在 .babelrc 文件中添加以下代码： ``` { "plugins": ["syntax-dynamic-import"] } ``` 3. 修改路由配置 在路由配置中，将组件的引入方式修改为按需加载，例如： ``` import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const Home = () => import('../views/Home.vue') const About = () => import('../views/About.vue') const Contact = () => import('../views/Contact.vue') export default new Router({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About }, { path: '/contact', name: 'contact', component: Contact } ] }) ``` 在上面的代码中，使用了箭头函数和 import() 方法来实现组件的按需加载。这样，当用户访问某个路由时，对应的组件才会被加载，从而减少了页面加载时间。 以上就是使用 vue-router 实现路由懒加载的方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值