vue-router路由

1.vue-router路由

简单来说就是把url中对应的组件进行关联，通过不同的url访问不同的组件。

2.路由跳转

路由跳转有两种：
（1）声明式

<router-link to="/path名"></router-link>

（2）编程式

• 实例1跳转传参

this.$router.push(
	{
		name:'路由配置中的名字'，
        query:{name:值}
	}
)

• 实例2简单跳转

this.$router.push({'/path'})

3.路由传参

通常路由传参有两种方式query和params

> 方法一：声明式：
> 第一种传参
<router-link :to = '
	{Path:"/home",
	query:{a:"111"}'
	></router-link>

 第二种传参
<router-link :to = '{
	Name:"home",
	parames:{
	Id:44}'
	></router-link>

4.别名和重定向

别名：可以造成一个组件，对应两个url
重定向：可以造成，一个url，对应多个不同的组件
示例1：别名

{
    path: '/about',
    name: 'about',
    alias:'/abc',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')//注:路由懒加载,
    //扩展：路由懒加载：是为了减免页面加载的压力，优化性能
  },

示例2：重定向

{
    path: "/Home",
    name: "home",
    component: () => import('../views/Home.vue'),
     redirect: { name: 'BookChooes' },//重定向本身也是一种路由跳转
    // 很多业务中，重定向也是需要逻辑处理
    },

5.路由导航守卫（钩子）

一.工作流程
1 导航被触发。
2 在失活的组件⾥调⽤离开守卫。
3 调⽤全局的 beforeEach 守卫。
4 在重⽤的组件⾥调⽤ beforeRouteUpdate 守卫 (2.2+)。
5 在路由配置⾥调⽤ beforeEnter。
6 解析异步路由组件。
7 在被激活的组件⾥调⽤ beforeRouteEnter。
8 调⽤全局的 beforeResolve 守卫 (2.5+)。
9 导航被确认。
10 调⽤全局的 afterEach 钩⼦。
11 触发 DOM 更新。
12 ⽤创建好的实例调⽤ beforeRouteEnter 守卫中传给 next 的回调函数。
二.分为三大类

1. 组件内beforeRouteUpdate，beforeRouteEnter，beforeRouteLeave
2. 全局beforeEach ，beforeResolve ，afterEach
3. 路由独享守卫beforeEnter

导航守卫的三个参数：
to 即将要进入的目标导航
from 当前导航正要离开的路由
next 可不可以进入想要去的路由

**以上都是路由的部分小知识点，会持续更新，请关注**