vue-router刷新页面后回到首页

已于 2022-07-23 18:22:35 修改
阅读量1.3w 收藏 23
点赞数 20
分类专栏： vue知识点整理及面试必备题库 文章标签： vue
于 2021-06-13 21:33:06 首次发布
张砚博
本文链接：https://blog.csdn.net/qq_47272950/article/details/117885745
版权

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。[[点击跳转到网站。]]
今天给大家分享一个小知识点！注意查收！

平时我们再写vue项目配置完路由之后会发现他不会自动回到首页，解决方法很简单，加个判断就可以啦!

在App.vue中直接写入以下代码

在created钩子函数中判断当前路由地址是否在首页home，如果不在则替换为home页面

created() {
      if (this.$router.path !== "/home")
        this.$router.replace("home")
    }

此处用created而不用mounted的原因如下

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

因此为了让浏览器减少负载，在刷新页面的时候直接让他替换到另一个页面，而不是先加载出home页面然后再替换

码上流星&洒下星辰
关注
  • 20
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 10
    评论
专栏目录
关于vue脚手架一个页面刷新页码或者直接房屋url跳回首页的问题
lsh499742959的专栏
05-19 528
关于vue脚手架一个页面刷新页码或者直接房屋url跳回首页的问题
vue通过路由实现页面刷新的方法
08-28
本篇文章主要介绍了vue通过路由实现页面刷新的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue2.0 keep-alive 路由跳转之后保留当前页面数据不变动
hyduan_h5的博客
05-27 4120
需求： 1：页面一数据由接口返回，修改部分数据， 2：数据仅前端页面调整，暂未提交修改数据库。 3：页面一跳转页面二，再由页面二返回页面一 4：页面一数据仍为修改后的数据 实现： 1：借用方式：keep-alive 2：keep-alive是vue中的一个内置组件，主要是将组建缓存到内存中，避免切换路由的时候页面刷新从而导致dom的重新渲染 一：在vue.app中添加keep-alive标签。 <template> <div id="app"> <keep-al.
vue刷新页面跳转新页面但又跳转回原页面的问题
最新发布
weixin_47375788的博客
01-30 569
load,在js语法里是onload,这里省去on,onload指页面加载完成后执行window.onload()里的js函数,首次加载页面是建立一个onload的监听事件并不执行,针对的是当前页面的下一次加载即刷新去执行onload里的方法,配合destroyed,可解决某一vue单页面刷新跳转另一页面的问题。beforunload是指页面刷新前执行的最后函数所以即使跳转另一页面也会在刷新完成后跳转回原页面,此方法适用与刷新页面前提交表格数据或阻止刷新的操作。：在mounted内创建监听事件。
vue iframe 刷新保留在原来的页面
rojie0的博客
05-11 4363
页面刷新 iframe 保留在原来的页面
vue 刷新浏览器重定向到首页（或者某一个页面）
热门推荐
qq_41559229的博客
04-10 2万+
最近用vue写一个模仿qq音乐的单页面应用， 因为看到黄轶老师的例子是浏览器刷新会路由会重新定向到首页的， 所以就想应该是跟路由有关系的。 而且我注意到一个细节。就是我在其他的页面刷新的时候，它会先短暂显示首页，再跳到刷新之前的页面， 所以是不是可以理解为项目刷新会先经过首页，再到刷新之前的页面。 所以，我就在我的App.vue。写了下面的代码 created(){ if(thi...
vue 项目刷新页面, 保留当前页面状态
weixin_46317118的博客
02-27 8359
问题 : 在vue项目中,刷新页面之后,之前的登录信息, 打开的所有菜单,都消失, 如何实现刷新之后页面仍然是刷新之前的状态 解决 : 使用vuex状态管理, 搭配 , webstorage本地存储. 将vuex里面的数据同步更新到 localStorage/sessionStorage里存储 以登录信息为例: 每次登录成功, 将用户名存进webstorage(根据具体需求去选择localSt...
vuejs中如何实现三级路由并刷新页面时保持当前路由激活状态
itclanCoder
09-15 2343
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号（ID：itclanCoder）如果不知道如何操作点击这里,标星不迷路前言之前有介绍过vuejs中的路由的传参及路由的props配置,对于如何配置一级路由,二级路由,对于很多同学来说,基本上没什么难度然后在配置三级路由以上的时候,往往却没那么容易,会出现...
Vue如何保存页面的当前的状态
qq_45272642的博客
05-08 5130
既然是要保持页面的状态（其实也就是组件的状态），那么会出现以下两种情况： 前组件会被卸载 前组件不会被卸载 那么可以按照这两种情况分别得到以下方法： 组件会被卸载： （1）将状态存储在LocalStorage / SessionStorage 只需要在组件即将被销毁的生命周期 componentWillUnmount （react）中在 LocalStorage / SessionStorage 中把当前组件的 state 通过 JSON.stringify() 储存下来就可以了。
F5刷新之后 跑到首页去了，应当停留在本页面
weixin_47581490的博客
03-30 3089
F5刷新之后 跑到首页去了，应当停留在本页面 解决： 可能是由于路由守卫里面，刷新之后重定向了个router.push({name:“index” }),把这个重定向给去掉 用路由守卫在控制台打印 from 若为null 那么就用下面的方法：将当前页面的路由存在cookie里；然后将路由重定向为当前页面，即router.push（{path:nowpage}） ...
vue单页面实现路由跳转后保留原页面数据
weixin_51958039的博客
10-24 1万+
在设置keep-alive缓存的组件中，首次进入组件，会一次调用组件的钩子函数：created --> mounted -->activated 再次进入时，只触发activated钩子函数。2.在路由选项中，配置meta属性，keepAlive为true即为需要缓存的组件，同时设置isBack属性，用来标示页面是否是从详情页面返回的。该步骤可以让一个组件里的值传到另一个组件里，不需要父子关系。页面的缓存，需要用到vue的内置组件keep-alive，来缓存列表页面，同时配合路由选项来更改页面的数据。
vue-taro-router:基本 Taro ，扩展成 vue-router 的使用体验
05-28
VueTaroRouter 基本 Taro ，扩展成 vue-router 的使用体验 Installation npm i vue-taro-router -S Usage // router.js import VueTaroRouter from "vue-taro-router"; const router = new VueTaroRouter(); // 添加拦截器 router .beforeEach((to, from, next) => { console.log(to); console.log(from); next(); }) .beforeEach((to, from, next) => { if (~to.path.indexOf("abc2")) { // 在拦截器里重定向 next({
解决VUE-Router 同一页面第二次进入不刷新的问题
10-15
主要介绍了解决VUE-Router 同一页面第二次进入不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router.js
12-30
vue路由vue-router.js文件下载
vue-router3.0版本中 router.push 不能刷新页面的问题
11-30
在 github 的 vue-router 中找到同样的一个问题：3.0.1版本通过router实例无法跳转 昨天发现有些路由不能正常跳转，找了一下发现都是那些实例化后使用 router.push 而不是直接使用 this.$router.push 的地方。 出现的情况是 router.push 后，url变化了，但是页面没有刷新，手动刷新一下才出现应有的画面。 我看了一下 package.json，我的 vue 和 axios 是没有写版本号，但 vue-router 明明写了版本号，怎么可能以前行的，现在就不行了呢？ 然后，我使用 npm view vue-router 查看后才发现使用的
Vue全部知识点整理
Debug的博客
11-01 4754
vue 以数据驱动为视图的渐进式MVVM框架。 渐进式:循序渐进的使用vue,可选择性强,可以只使用vue的小功能,不必完全使用vue。不强制的意思。 – mvvm：m:数据模型, v-view 视图:数据是双向绑定的,所有数据改变导致视图改变。 vue底层原理和vue描述 原理:Object.definProperty vue:优点:虚拟dom,模块化开发,数据驱动,双向响应，浏览器统一兼容。 缺点：由于是js生成的虚拟dom,不利于seo爬虫爬取,首屏加载相对于静态页面慢。 data为什么是函数 因
关于vue2中$set及$delete的使用
Debug的博客
03-29 3044
this.$set的使用 在平时使用vue进行开发的时候，我经常会遇到一个这样的问题： 就是当data中包含声明且已赋值的对象或者数组（数组包对象）时，我们要向当前的这个对象中添加一个新的属性并且更新，结果发现并不会更新视图,只在控制台打印 <template> <div> <span>{{obj}}</span> <input type="button" @click="add()"> </div>
Vuex常见面试题
Debug的博客
05-16 2551
1.vuex是什么？怎么使用？哪种功能场景使用它？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理插件。（公共数据库） 当项目遇到以下两种场景时 1. 多个组件依赖于同一状态时。 2. 来自不同组件的行为需要变更同一状态。 解决的问题：多个视图依赖同一个状态，来自不同视图的行为需要变更同一状态，适用于中大型的单页面应用。 2.vuex有哪几种属性？ 有五种，分别是 State、 Getter、Mutation 、Action、 Module state：存放公共数据的地
vue刷新页面后回到首页了怎么解决
06-02
如果您使用的是Vue Router，您可以使用`vue-router`提供的导航守卫来解决这个问题。 在您的路由配置中，你可以使用`beforeEach`导航守卫来检查刷新页面后的当前路径是否合法。例如： ``` import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const router = new Router({ mode: 'history', routes: [ { path: '/', name: 'home', component: Home }, // other routes... ] }) router.beforeEach((to, from, next) => { // 如果路径不存在，则重定向到首页 if (!to.matched.length) { next('/') } else { next() } }) export default router ``` 在这个例子中，我们使用`beforeEach`导航守卫来检查刷新后的当前路径是否存在于我们的路由配置中。如果路径不存在，则重定向到首页。如果路径存在，则继续正常导航。 希望这可以帮助您解决这个问题！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码上流星&洒下星辰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值