【vue2】vue-router的详解

本文主要讲解vue-router的详细说明，如果在企业项目中实际可以参考我的另外一篇文章，链接放在本文的7.注意点章节

1.router-link

<router-link>支持用户在具有路由功能的应用中(点击)导航,可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。

属性	类型	说明
to	String/Object	目标路由/目标位置的对象
replace	Boolean	不留下导航记录
append	Boolean	在当前路径后加路径 /a => /a/b
tag	String/Object	指定渲染成何种标签
active-class	String/Object	激活时使用的Class

<router-link :to="{ path: '/login'}" replace tag="span"></router-link>

---

2.router-view

<router-view>是一个功能性组件，用于渲染路径匹配到的视图组件，将显示与 url 对应的组件。

//方式一
<router-view></router-view>
//方式二 name是router设置里的name，会渲染对应的路由配置中 components下的相应组件
<router-view name="music"></router-view>

---

3.路由传参props

3.1使用布尔方式：

router配置文件，在路由后面写上参数，并设置props为true

 {
        path: '/music',
        name: 'music',
        component: () => import(/* webpackChunkName: "home" */ '@/pages/music/index.vue'),
        props: true,
        meta: {
          title: '音乐',
          current: '/music',
        },
      },

在页面A，设置跳转需要传递的参数params

//方式一
<router-link :to="{name:'music', params: {id: 'aaaaa'}}">跳转</router-link>
//方式二
toNext() {
    this.$router.push({
    	name: 'music',
    	params: {
    		id: 'aaaaa'
    	}
    })
}

在跳转过去的页面B，通过props或者this.$params取参

//方式一
props: {
	id: {
		type: String,
		default: ''
	}
}
//方式二
this.$params.id

---

3.2 Object模式
router配置文件

   {
        path: '/music',
        name: 'music',
        component: () => import(/* webpackChunkName: "home" */ '@/pages/music/index.vue'),
        props: {
          id: route.query.id,  //使用query
          age: route.params.name  //使用params
        },
        meta: {
          title: '音乐',
          current: '/music',
        },
      },

在页面A，设置跳转

//方式一
<router-link :to="{name:'music',query: {id: 'aaaaa'}, params:{name:'音乐'}}" >跳转</router-link>
//方式二
toNext() {
	this.$router.push({
		name: 'music'
		query: {
			id: 'aaaaa'
		},
		params: {
			name: '音乐'
		}
	})
}

在跳转过去的页面B，通过props或者this.$params取参

//方式一
props: {
	id: {
		type: String,
		default: ''
	},
	name: {
		type: String,
		default: ''
	}
}
//方式二
this.$route.query.id
this.$route.params.name

---

4.路由守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航

参数	说明
to	即将要进入的目标路由对象
from	当前导航正要离开的路由
next	回调方法

例如：

router.beforeEach((to, from, next) => {
//如果没有登录则,跳转login,否则进行下一步
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

其中next有如下使用方法

方法	说明
next()	进行下一个钩子
next(false)	中断导航，URL如已改，则重置到from的地址
next(‘/’)	中断当前跳转并到其他地址，可设置路由对象
next(error)	导航终止并传递错误给onError()

---

4.1全局解析守卫beforeResolve
router.beforeResolve是获取数据或执行任何其他操作，在 每次导航时都会触发，但是确保在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用。

router.beforeResolve(async to => {
  if (to.meta.requiresCamera) {
    try {
      await askForCameraPermission()
    } catch (error) {
      if (error instanceof NotAllowedError) {
        // ... 处理错误，然后取消导航
        return false
      } else {
        // 意料之外的错误，取消导航并把错误传给全局处理器
        throw error
      }
    }
  }
})

---

4.2全局后置钩子afterEach
后置守卫不会接受next函数也不会改变导航本身

router.afterEach((to, from) => {
  // ...
})

---

4.3 路由独享守卫beforeEnter
可以在路由配置上直接定义专属的beforeEnter守卫，与全局前置守卫的方法参数是一样的。beforeEnter 守卫 只在进入路由时触发，不会在 params、query 或 hash 改变时触发。

例如：从 /users/2 进入到 /users/3 或者从 /users/2#info 进入到 /users/2#projects。它们只有在 从一个不同的 路由导航时，才会被触发

const router = new VueRouter({
  routes: [
    {
      path: '/music',
      component: () => import(/* webpackChunkName: "home" */ '@/pages/music/index.vue'),
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

---

4.4 组件内的守卫

beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

const UserDetails = {
  template: `...`,
  beforeRouteEnter(to, from) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
  },
  beforeRouteUpdate(to, from) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
  },
}

---

5.完整的导航解析流程

1.导航被触发。

2.在失活的组件里调用 beforeRouteLeave 守卫。

3.调用全局的 beforeEach 守卫。

4.在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。

5.在路由配置里调用 beforeEnter。

6.解析异步路由组件。

7.在被激活的组件里调用 beforeRouteEnter。

8.调用全局的 beforeResolve 守卫(2.5+)。

9.导航被确认。

10.调用全局的 afterEach 钩子。

11.触发 DOM 更新。

12.调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

---

6.路由元信息

如果希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等,可以使用meta属性，代码如下

    {
        path: '/home',
        name: 'home',
        component: () => import(/* webpackChunkName: "home" */ '@/pages/home/home.vue'),
        meta: {
          title: '首页',
          current: '/home',
        },
      },

//方法一，在vue页面获取
this.$route.meta.title
//方法二 在导航守卫获取
router.beforeEach((to, from) => {
	console.log(to.meta.title)
})

---

7.注意点

1.router-vue官网地址：https://router.vuejs.org/zh/guide/
2.router有两种mode方式，分别为history和hash,默认是hash,可以参考我的搭建项目文档：【vue create】二.配置Esline、less、nprogress、ant-design-vue、环境变量env、axios、vuex、Router、路由守卫以及登录页