路由VueRouter

理解：一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
前端路由：key是路径，value是组件。
什么是路由：路由是一种映射关系
Vue中的路由是什么：路径和组件的映射关系，根据路由就能知道不同路径的，应该匹配渲染哪个组件

基本使用

vue2安装VueRouter3,Vuex3
vue3安装VueRouter4,Vuex4

VueRouter的使用(5+2)

5个基础步骤(固定）

① 下载:下载 VueRouter 模块到当前工程，版本3.6.5

yarn add vue-router@3.6.5    或    npm i vue-router@3.6.5

② 引入

import VueRouter from'vue-router

③安装注册

Vue.use(VueRouter）

④创建路由对象

const router =new VueRouter()

⑤注入，将路由对象注入到new Vue实例中，建立关联

new vue({

	render:h =>h(App),

	//router:router  =>  简写
    router

}).$mount('#app')

2个核心步骤

①写组件（views文件夹中），配置路由规则（new VueRouter({配置对象中})）

views文件夹：页面组件-页面展示-配合路由使用

components文件夹：复用组件-展示数据-常用于复用

②配置导航，配置路由出口（router-view标签）

单文件路由配置

目的：项目大了，入口文件处引入的文件过多，要修改路由规则时不方便，目的就是为了方便维护。

步骤：

1、创建src目录下创建router文件夹，router文件夹下创建index.js文件

2、引入相关文件

3、注册并配置规则

4、导出，入口文件处引入并注册

声明式导航-导航链接

声明式导航：即router-link

需求:实现导航高亮效果 vue-router提供了一个全局组件router-link(取代 a标签)

能跳转，配置 to 属性指定路径(必须)。本质还是a标签，to 无需 #，路径to替换href

能高亮，自带激活时的类名（router-link-exact-active 和 router-link-active），可以直接设置高亮样式

声明式导航的两个高亮类名

router-link-active ：模糊匹配（使用更多）

to="/find"  => 地址栏/find		/find/one  	/find/two

在浏览器地址栏中，只要是在/find及其下面的路径，该标签都会有该类名

router-link-exact-active ：精确匹配

to="/find"  => 地址栏/find

在浏览器地址栏中，只有在/find下，该标签都会有该类名，像这样/find/one.....下，该标签不会有该类名

自定义高亮类名

在配置路由规则中配置

// 配置路由规则
const router = new VueRouter({
  routes: [
    { path: '/find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend }
  ],
  //自定义高亮类名
  linkActiveClass: 'active',//模糊匹配
  linkExactActiveClass: 'exact-active'//精确匹配
})

几个注意点

路由组件通常存放在pages或views文件夹，一般组件通常存放在components文件夹。
views文件夹：页面组件（路由组件）-页面展示-配合路由使用

components文件夹：复用组件-展示数据-常用于复用
通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
每个组件都有自己的$route属性，里面存储着自己的路由信息。
整个应用只有一个router，可以通过组件的$router属性获取到。

声明式导航-跳转传参

理解：跳转路由时传递参数（跳转时传值）

查询参数传参-query参数(推荐传`多个参数`时用)

在****中传

传递参数

语法：to="/path?参数名=值&参数名=值......'

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
				
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

接收参数（对应页面组件接收传递过来的值）

语法：$route.query.参数名
```
$route.query.id
$route.query.title
```

动态路由传参-params参数（推荐传`单个参数`时用）

①配置动态路由，声明接收params参数 path:"path/:参数名一?/:参数名二?..."

**注意：**使用动态路由传参时，跳转路由时必须要传参，不传是匹配不到对应组件的，此时需要在参数名后面加上?，这样跳转路由时就不用必须传参了

const router = new VueRouter({
	routes:[
		...,
		{
			name:'xiangqing',
			path:'detail/:id?/:title?', //使用占位符声明接收params参数
			component:Detail
		}
	]
}）

②配置导航链接，传递参数:to="path/参数值一/参数值二...

<!-- 跳转并携带params参数，to的字符串写法   666/你好  666对应:id  你好对应:titil-->
<router-link :to="detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

③对应页面组件接收传递过来的值,接收参数：$route.params.参数名

$route.params.id
$route.params.title

路由的props传参

作用：让路由组件更方便的收到参数，组件接收用props属性接收

{
	name:'路由名',
	path:'path/:id',
	component:引入的路由组件,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数（path/:id，:id就是params参数）通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

多级路由

配置路由规则，使用children配置项：

routes:[
	{
		path:'/about',
		component:About,
	},
	{
		path:'/home',
		component:Home,
		children:[ //通过children配置子级路由
			{
				path:'news', //此处一定不要写：/news
				component:News
			},
			{
				path:'message',//此处一定不要写：/message
				component:Message
			}
		]
	}
]

跳转（要写完整路径）：

<router-link to="/home/news">News</router-link>

路由重定向

理解：网页打开时，默认的是#/,此时不会显示任何任何路由组件，为了使打开一网站默认显示一组件可以设定路由重定向。（比如说首页路径是/index,则当浏览器地址栏不管输入的是/或是/index都能显示首页）

使用：在router配置规则中使用redirect配置路径

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/my' },//路由重定向，当路径为/时会跳转到/my路径
    { path: '/my', component: My },
    { path: '/friend/:friend1/:friend2?', component: Friend }
  ],
})

路由提示404

作用：当页面找不到匹配时，给页面一个提示

使用：

1、创建一个提示组件NotFound

2、引入

3、在routes数组最后一项配置

// 引入
import NotFound from '@/view/NotFound.vue'
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/my' },//路由重定向，当路径为/时会跳转到/my路径
    { path: '/my', component: My },
    { path: '/friend/:friend1/:friend2?', component: Friend }，
    // 配置
    { path: '*', component: NotFound } // * 任意路径，前面匹配完都没匹配到，就会匹配该组件NotFound
  ],
})

路由模式设置

问题:路由的路径看起来不自然,有#，能否切成真正路径形式?

hash路由(默认) 例如:http://localhost:8080/#/home history路由(常用) 例如:http://localhost:8080/home(以后上线需要服务器端支持，前端只需要改mode,后端配置访问规则)

const router = new VueRouter({
  mode: 'history',
  routes: [....]
})

命名路由（简化跳转）

作用：当路径url长度过长时，可以用 name属性简化路由的跳转。

如何使用

给路由命名：

{
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
                      name:'hello' //给路由命名
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}

简化跳转：

<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'hello',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

浏览器历史记录`<router-link>`的replace属性

作用：控制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
如何开启replace模式：<router-link replace .......>News</router-link>

编程式路由导航

作用：不借助<router-link> 实现路由跳转，让路由跳转更加灵活（比如说有一个按钮，点击后跳转）

借助两个api

$router的两个API .push()和.replace() .push()追加浏览器历史记录跳转 .replace()替换当前浏览器历史记录跳转

具体编码：

总结：路径短的用path，长的用name，参数多的用对象写法，参数少的用字符串拼接

//比如说有一个按钮 点击触发函数 调用下面的api进行跳转
//只跳转
this.$router.push("路由路径") 

//字符串写法-跳转传参
this.$router.push("路由路径？key=value&key=value")//query传参
this.$router.push("路由路径/params") //params传参

//跳转并传参
this.$router.push({
	path:'路径',
		query:{
			id:xxx,
			title:xxx
		}
})

//跳转并传参
this.$router.replace({
	name:'路由名',
		params:{
			id:xxx,
			title:xxx
		}
})

操控浏览器历史记录api

this.$router.forward() //前进
this.$router.back() //后退
this.$router.go(n) //可前进也可后退,n是一个整数，为正(前进n步)，为负(n步)

缓存路由组件：keep-alive（优化性能）

keep-alive是什么 keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。
keep-alive的优点在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提升用户体验。
keep-alive的三个属性 ① include：组件名(不是文件名，如果没有配置组件名才是文件名)数组，只有匹配的组件会被缓存组件名数组，

②exclude：任何匹配的组件都不会被缓存 ③ max：最多可以缓存多少组件实例

通常使用include,但是组件页面需缓存许多时，用exclude来排除和max来限制个数，结合使用，因为缓存过多会影响性能

具体编码：

<!--News不被展示时 让News组件保持挂载不被销毁 -->
<keep-alive include="News"> 
    <router-view></router-view>
</keep-alive>

<!-- 多个组件保持挂载不被销毁 -->
<keep-alive :include="['News', 'Message']">
    <router-view></router-view>
</keep-alive>

两个新的生命周期钩子（activated、deactivated）

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
具体名字：
1. activated路由组件被激活时触发。
2. deactivated路由组件失活时触发。

路由守卫

作用

对路由进行权限控制

分类

全局守卫、独享守卫、组件内守卫

全局守卫

//在配置路由器后，后面配置
//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
			next() //放行
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next() //放行
	}
})

//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
	console.log('afterEach',to,from)
	if(to.meta.title){ 
		document.title = to.meta.title //修改网页的title
	}else{
		document.title = 'vue_test'
	}
})

独享守卫

// 在路由器中配置
beforeEnter(to,from,next){
	console.log('beforeEnter',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){
			next()
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next()
	}
}

组件内守卫

//在组件中配置
//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
}

路由器的两种工作模式

对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
hash模式：
1. 地址中永远带着#号，不美观。
2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
3. 兼容性较好。
history模式：
1. 地址干净，美观。
2. 兼容性和hash模式相比略差。
3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

解决history模式刷新页面服务端404的问题的方法

使用中间件：npm官方的 connect-history-api-fallback

const express = require('express')
// 引入中间件
const history = require('connect-history-api-fallback')

const app = express()
// 使用中间件
app.use(history())
app.use(express.static(__dirname + '/static'))

app.get('/person', (req, res) => {
  res.send({
    name: 'kaka',
    age: 18
  })
})
app.listen(5000, (err) => {
  if (!err) { console.log('启动成功') }
})

路由VueRouter

路由VueRouter

基本使用

VueRouter的使用(5+2)

5个基础步骤(固定）

2个核心步骤

单文件路由配置

声明式导航-导航链接

声明式导航的两个高亮类名

自定义高亮类名

几个注意点

声明式导航-跳转传参

查询参数传参-query参数(推荐传多个参数时用)

动态路由传参-params参数（推荐传单个参数时用）

路由的props传参

多级路由

路由重定向

路由提示404

路由模式设置

命名路由（简化跳转）

浏览器历史记录<router-link>的replace属性

编程式路由导航

借助两个api

具体编码：

操控浏览器历史记录api

缓存路由组件：keep-alive（优化性能）

两个新的生命周期钩子（activated、deactivated）

路由守卫

作用

分类

全局守卫

独享守卫

组件内守卫

路由器的两种工作模式

查询参数传参-query参数(推荐传`多个参数`时用)

动态路由传参-params参数（推荐传`单个参数`时用）

浏览器历史记录`<router-link>`的replace属性