浅谈VUE的路由管理

Vue的路由

什么是路由？

在我们生活中的路由，一句话概括就是：数据从一个网络到另一个网络就是靠路由器来完成的，而在程序开发中的路由不是指路由器和网络协议中的路由，但是基本思想是一样的。而路由又分为前端路由和后端路由，就不细说了。

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；

作用：简单来说，用来定义页面跳转与模块之前的关系，看下图结果

vue路由基础使用

<!-- 使用 router-link 组件来导航. -->  
  <!-- 通过传入 `to` 属性指定链接. --> 
   <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->  
  <router-link to="/Hauwei">Go to Huawei</router-link>   
 <router-link to="/cloud">Go to Cloud</router-link>

Vue.use(Router);
const Hello => import( './hello.vue'):
export default new Router({
routes: [
{ path: './hello',component: Hello,},
],
},);


	
naClick(){
this.$router.push( " /detail");
}

动态路由

vue.use(Router);
const Hello = () =>import( "./hello.vue" );export default new Router({
routes: [
path: "/hello/$id ', component: Hello},
],
},);

动态路由是什么?
一般我们使用vue-router配置路由时，都是直接配置固定的路径，而动态路由是我们可以在 vue-router 的路由路径中使用“动态路径参数”，让路径不再是固定的。

this.$router.push('/cart')//官方介绍:也可以通过对象的形式携带参数

router.push('home')// 字符串

router.push({ path: 'home' })// 对象

router.push({ name: 'user', params: { userId: '123' }})/ / 命名的路由

router.push({ path: 'register', query: { plan: 'private' }}) // 带查询参数，变成 /register?plan=private

获取参数

this.$route.params

this.$route.query

重定向

routes: [
{
path:'*'，
redirect: "/hello" ,
},
]

路由的两种模式

>hash(默认)

>history

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

路由导航守卫

全局守卫

• 前置守卫: beforeEach，一般用于路由进入前进行操作〉解析守卫: beforeResolve

• 后置守卫: afterEach，一般用于路由进入后进行操作

路由独享守卫

• beforeEnter:单个路由进入后调用

组件守卫

• beforeRou**ter:路由被确认前调用

• beforeRouteUpdate:路由改变，组件刷新时调用> beforeRouteLeave:离开路由时调用

完整的导航解析流程

1.导航被触发。

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

3.调用全局的beforeEach守卫。

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

.在路由配置里调用beforeEnter 。

6.解析异步路由组件。

7.在被激活的组件里调用beforeRou**ter 。

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

9.导航被确认。

10.调用全局的afterEach钩子。

11.触发DOM更新。

12.用创建好的实例调用beforeRou**ter守卫中传给next的回调函数。