路由(vue-router)

spa 单页面应用程序。路由: Hash地址与组件之间的对应关系

工作方式

1. 点击页面上的路由链接
2. 导致URL地址栏中的Hash值发生了变化
3. 前端路由监听了Hash地址的比那花
4. 前端路由把当前Hash地址对应的组件渲染到浏览器中

安装和配置

1. 安装vue-router包

npm install vue-router@3.5.2 -S

2. 创建路由模块
   在src源代码目录下,创建router/index.js路由模块

//导入Vue和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'
//调用Vue.use()函数,把VueRouter安装为Vue的插件
Vue.use(VueRouter)
//创建路由的实例对象
const router = new VueRouter()
//向外共享路由的实例对象
export default router

3. 导入并挂在路由模块,在main.js

import router from '@/router/index.js'

new Vue({
	render: h => h(app),
	router
}).$mount('#app')

4. 声明路由链接和占位符

<!--占位-->
<router-view></router-view>

//声明路由链接
import 组件名称 from '组件的地址'

const router = new VueRouter({
	// routers是一个数组,定义"hash"地址
	routes: [
		{path: '路由地址' , component: 要展示的组件名称}
	]
})

router-link标签用法

相当与a标签的跳转

<router-link to='/路由地址'>点击我跳转</router>

redirect路由重定向

const router = new VueRouter({
	// routers是一个数组,定义"hash"地址
	routes: [
		{path: '/' , redirect: 组件名称},
		{path: '路由地址' , component: 要展示的组件名称}
	]
})

嵌套路由

const router = new VueRouter({
	// routers是一个数组,定义"hash"地址
	routes: [
		{path: '/' , redirect: 组件名称},
		{
			path: '路由地址' , 
			component: 要展示的组件名称,
			children: [
				{ path: 'tab1',component: Tab1 }
			]
		}
	]
})

动态路由匹配

const router = new VueRouter({
	routes: [
		{ path: '路由地址/:id' , component: 组件名称 }
	]
})

获得id的属性值

//1. 使用this.$route.params.id获取的值

//2. 开启props进行传参
//路由里面开启
const router = new VueRouter({
	routes: [
		{ path: '路由地址/:id' , component: 组件名称,props: true }
	]
})

//使用的时候定义,直接使用属性即可
export default {
	name: '组件名称',
	props: ['id'],
	methods: {
		showTis(){
			console.log(this)
		}
	}
}

拓展query和fullPath属性

在路由参数对象中可以使用this.$route.query访问查询参数
在路由参数对象中可以使用this.$route.fullPath访问完整的hash路径

声明式导航&编程式导航

声明式导航

点击链接实现的方式,叫做声明式导航

编程式导航

调用API方法实现的导航方式,叫做编程式导航

1. this.$router.push("hash地址") 跳转到指定的hash地址,并增加一条历史记录
2. this.$router.replace("hash地址") 跳转到指定的hash地址,并替换掉当前的历史纪录
3. this.$router.go(数值n)可以在浏览历史中前进或者后退,数值可以是正数或者负数。代表前进或者后退

导航守卫

可以控制路由的访问权限

全局前置守卫

每次发生路由的导航跳转时,的会触发全局前置守卫,在全局前置守卫中,程序员可以对每个路由进行访问权限控制。 在router/index.js书写

//创建路由实例对象
const router = new VueRouter({...})
//调用路由实例对象的beforeEach方法,即可声明"全局前置守卫"
//每次发生路由导航跳转的时候,都会自动触发"回调函数"
router.beforeEach((to,from,next)=> {
	//to 是将要访问的路由的信息对象
	//from 是将要离开的路由信息对象
	//next 是一个函数,调用next()表示放行,允许这次路由导航
})

next()函数的三种调用方式

1. 当用户拥有后台主页的访问权限,直接放行: next()
2. 当前用户没有后台主页的访问权限,强制跳转到登录页面: next(‘/login’)
3. 当用户没有后台主页的访问权限,不允许跳转到后台主页: next(false)

全局后置守卫

控制页面的权限

const arrPath = ['路径1','路径2']
if(arrPath.indexOf(to.path) !== -1){...}

. 当用户没有后台主页的访问权限,不允许跳转到后台主页: next(false)

全局后置守卫

控制页面的权限

const arrPath = ['路径1','路径2']
if(arrPath.indexOf(to.path) !== -1){...}