vue-router (2)

最新推荐文章于 2023-12-13 16:03:48 发布
最新推荐文章于 2023-12-13 16:03:48 发布
阅读量161 收藏
点赞数
分类专栏： vue2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rashu99/article/details/114527621
版权
本文探讨了在Vue Router中如何利用生命周期函数、导航守卫动态修改document.title，以及解决单页应用（SPA）标题不随页面变化的问题。通过在路由配置上使用导航守卫beforeEach和afterEach，可以更方便地管理网页标题。同时，介绍使用keep-alive组件来保留组件状态，避免重复渲染，以及activated和deactivated生命周期钩子的运用。此外，还提到了keep-alive的include和exclude属性在控制缓存页面时的作用。
摘要由CSDN通过智能技术生成

生命周期函数
在这里插入图片描述

导航守卫
动态修改document.title

网页标题是通过 title 来显示的 但是SPA只有一个固定的HTML
切换不同的页面时 标题不会改变

可以在每一个路由对应的.vue文件中 通过mounted声明周期函数 但是这样不好维护

更好的方法使用导航守卫

beforeEach的三个参数
to from next
在这里插入图片描述
在这里插入图片描述

afterEach的三个参数
to from

路由独享守卫

在路由配置上
在这里插入图片描述

组件内守卫

keep-alive
保留状态 避免重新渲染

Home.vue里的生命周期里的created destroyed 会被反复创建 反复销毁

也就是说
点完首页后默认显示新闻 再点消息 再点其他的页面比如关于 再点首页 还是显示新闻 因为被销毁了 又重新创建一个新的

想要保留原来的状态 就是返回回来显示的是消息

App

最低0.47元/天 解锁文章
Rashu99
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用$router.back()进行页面返回时，先在子路由跳转完后再回到上一级路由
jr_csdn_jr的博客
08-22 1万+
使用路由进行页面前进时，路由会向 history 栈添加一个新的记录，所以，当用户点击$router.back()后退按钮时，则回到之前的 URL。 路由中设置： { path: '/shop', component: Shop , children: [ {path: 'goods', component: ShopGoods}， {path: 'info', component: ShopGoods} ] }, 如果先在子路由中来回点
Vue-Router2.X多种路由实现方式总结
01-21
注意：vue-router 2只适用于Vue2.x版本，...import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter) 1.定义组件，这里使用从其他文件import进来 import index from './components/inde
router返回
最新发布
m0_58235310的博客
12-13 354
【代码】router返回。
vue-router路由跳转&路由传参
weixin_45084986的博客
04-13 2160
对于大多数单页面应用，都推荐使用官方支持的 vue-router 库。更多细节可以移步 vue-router文档 。 跳转方式一：声明式导航router-link <router-link :to="需要跳转到的页面的路径"> <router-link :to="home">//路由链接 <!--或<router-link :to="{name:'home'}">--> <!--或<router-link :to="{path:'/hom
Vue 路由 跳转【返回、刷新、跳转】
estrusKing的博客
03-23 1万+
Vue 路由 跳转【返回、刷新、跳转】this.$router.go(-1)this.$router.back()this.$router.pushthis.$router.replace this.$router.go(-1) 原页面表单中的内容会丢失； 向前或者向后跳转n个页面，n可为正整数或负整数 this.$router.go(-1)：后退+刷新 this.$router.go(0)：刷新； this.$router.go(1) ：前进 this.$router.back() 原页表表单中的内
vue返回上一页(后退)的几种方法与区别
热门推荐
vvv3171071的博客
11-30 8万+
案例： 从a页面=>b页面=>c页面，当前在c页面，执行某方法后可以如同按了浏览器后退键一样返回b页面 方法： 若使用vue-router，this.$router.go(-1)可以回到上一页 this.$router.back() window.history.go(-1) 区别 ①与②的区别是： go(-1): 原页面表单中的内容会丢失： 1. this.$router.go(-1)：后退+刷新； 2. this.$router.go(0)：刷新； 3. this.$route
【vue-router源码】八、router.go、router.back、router.forward源码解析
MAXLZ的博客
06-10 3846
【vue-router源码】系列文章将带你从0开始了解vue-router的具体实现。本篇文章将介绍router。go、router.back、router.forward的实现。
vue-router-invoke-webpack-plugin:根据文件目录自动生成vue-router的路由
05-14
typescript 重写了新版本，同时支持vue2.x和vue3.x 根据文件目录自动生成vue-router的路由。 安装 npm npm install vue - router - invoke - webpack - plugin - D cnpm cnpm install vue - router - invoke - ...
vue-router-nav-呈现vue-router路由的简约响应式导航栏。-Vue.js开发
05-27
vue-router-nav呈现vue-router路由的简约响应式导航栏。 观看演示。 依赖关系您需要拥有vue-router insta vue-router-nav简约的响应式导航栏，用于呈现vue-router的路由。 观看演示。 依赖关系您需要安装vue-router...
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
vue-router-sitemap通过vue-router配置安装npm i --save vue-router-sitemap示例用法// router.js import VueRout vue-router-sitemap通过vue-router配置生成sitemap.xml安装npm我-保存vue-router-sitemap示例用法//...
VUE中路由变化this.$router(push\replace\go\back)
m0_49515138的博客
01-13 515
描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。用法：同this.$router.push()描述：跳转到指定的url，
Vue------this.$router.back()、this.$router.go()的异同
COCOLI_BK的博客
05-27 5185
返回上一个页面： 1.$router.back() 2.$router.go() 区别点在于： go(-1): 原页面表单中的内容会丢失； this.$router.go(-1)：后退+刷新； this.$router.go(0)：刷新； this.$router.go(1) ：前进 back(): 原页表表单中的内容会保留；在返回界面传递参数； this.$router.back():后退 ； this.$router.back(0) 刷新； this.$router.back(1)：前进
vue中$router.back()、$router.go()的区别使用
qq_37734787的博客
10-14 2万+
使用解析1 开发中遇到返回上一页的需求，有两个方法可选： 1.$router.back() 2.$router.go() 在使用中发现，使用router.back()和router.back()和router.back()和router.go(-1)作用相同，都是返回原页面。但如果原页面路由携带参数，使用以上两个方法返回的原页面路由参数消失，此时使用$router.back(-1)返回原页面路由参数仍存在。 使用解析2 go(-1): 原页面表单中的内容会丢失； this.$router.go(-1)：后退
Vue路由的$router.back(-1)回退时如何判断有没有上一个路由
Seven_drunk的博客
04-02 1万+
每个页面的左上角有一个返回按钮< 点击时的代码是this.$router.back(-1)，返回上一个路由 但是用户点开其中一页，用户打开时并没有上一条路由的历史记录，所以点击<按钮时没有反应。 所以应该怎么判断有没有上一条路由的历史记录。 1.在页面一开始加上一个全局的函数： activated: function () { this.$setgoindex() ...
router返回时携带参数
uniquemei的博客
12-21 2万+
vue项目中如何在router.back()的时候携带参数呢，又如何在界面中获取返回的参数呢？废话不多说，直接上代码。 1、在返回界面传递参数 this.$route.params.user = "123"; this.$router.back(); 2、在返回到的上一个界面接收参数 let previousRouterName = ""; let selectUser = ""; beforeRouteEnter(to, from, next) { previousRouterName
vue中this.$router.back()与this.$router.go(-1)返回上一页的区别
weixin_43473436的博客
11-12 6874
go(-1): 原页面表单中的内容会丢失； this.$router.go(-1)：后退+刷新； this.$router.go(0)：刷新； this.$router.go(1) ：前进 back(): 原页表表单中的内容会保留； this.$router.back():后退 ； this.$router.back(0) 刷新； this.$router.back(1)：前进 ...
vue中$router.back()和$router.go()
qq_43638735的博客
04-10 8648
返回上一页，有两种方法： 1. $router.back() 2. $router.go() 使用$router.back()和$router.go(-1)作用相同，都是返回原页面，但如果原页面路由携带参数，使用以上两个方式返回的原页面路由参数消失，此时使用$router.back(-1)返回原页面路由，参数仍存在。 go(-1):原页面表单中的内容会丢失； this.$router.go(-1):后退+刷新； this.$router.go(0):刷新； this.$router.go(1):前
vue this.$router.go(-1); 或者 this.$router.back() 返回时怎么带参数
weixin_40841731的博客
04-22 2万+
1、声明一个空的Vue模块goBackEntity import Vue from 'vue' /** * 定义空的vue实例，作为 goBackEntity实现非父子组件之间的通信(vue2.x中去掉了broadcast) */ var goBackEntity = new Vue({}); export default goBackEntity; 2、在需要传参数的页面 ...
新手指南：从零构建vue2+vue-router2+webpack3项目
"这篇教程详细介绍了如何从零开始构建一个基于Vue2、Vue-Router2和Webpack3的项目。教程适合新手，注重实践操作，不深入探讨相关技术的底层原理。首先，创建一个名为vue2practice的项目目录，并通过npm初始化生成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值