【 Vue 路由 跳转 路由守卫 】

Vue Router replace 编程式导航缓存路由组件

路由跳转的replace方法

1. 作用:控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式：push 和 replace
3. replace是替换当前记录，路由跳转时候默认为push方式

replace 标签写法 ：

	
	<router-link :replace="true" >News< / router-link>
	简写
	<router-link replace >News< / router-link>
	

replace push Js 写法 ：

编程式路由导航(不用 < router-link > 标签时)

不借助< router-link > 标签实现路由跳转，让路由跳转更加灵活

编程式路由

编程式	作用
this.$router. push({ })	内传的对象与中的to相同
this.$router. replace({ })	内传的对象与中的to相同
this.$router. forward( )	前进
this.$router. back( )	后退
this.$router. go(number)	可前进也可后退,n为正数前进n，为负数后退

运用方法 举一反三

activated deactivated

组件的激活与失活

1. activated 激活
2. deactivated 失活

写法

<template>
	<li :style="iopacity}">vue</li>
</template>

<script>
	export default {
		name:'Name07',
		data(){
			return{
				opacity : 1
			}
		},
		//激活
		activated():{
			console.log( "组件被激活")
			this.timer = setInterval(() =>{
				this.opacity -= 0.01
				if(this.opacity <= 0) this.opacity = 1
			},16)
		},
		//失活
		deactivated(){
			console.log( "组件失活")
			clearInterval(this.timer)
		}
	}
</script>

路由守卫

作用：对路由进行权限控制
分类：全局守卫、独享守卫、组件内守卫

全局守卫

meta 路由源信息

独享守卫

beforeEnter ( to , from , next ) => { }

组件内守卫

重点 1 ：全局路由守卫

方法： router.beforeRouterLeave( to , from , next ){ }

1. 先引入 VueRouter 组件 ----- 总路由
2. 再写要使用的组件路由

3. 创建路由器

拓展传值方式	作用
name	路由组件名
path	路由查询路径
component	组件
meta	改变标题
params-----请求头	以name为标识符，需要使用占位符
query-----请求体	可使用name也可使用path作为标识符