Xmind鸟瞰图：
简单文字总结：
-
路由的概念
-
1.路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。 那么url地址和真实的资源之间就有一种对应的关系(映射关系)，就是路由,比如生活中的路由。
-
2.路由的优点：
-
1.整体不刷新页面，用户体验更好
-
2.数据传递容易, 开发效率高
-
-
3.路由的三个对象：路由中有三个基本的概念 route, routes, router
-
-
vue-router的使用步骤
-
1.下载vue-router模块到当前工程
-
2.在main.js中引入VueRouter函数
-
3.添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件
-
4.创建路由规则数组 – 路径和组件名对应关系
-
5.用规则生成路由对象
-
6.把路由对象注入到new Vue实例中
-
7.用router-view作为挂载点, 切换不同的路由页面
-
-
vue路由-导航
-
1.声明式导航
-
1.基础使用
-
1.vue-router提供了一个全局组件 router-link
-
2.router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)
-
3.router-link提供了声明式导航高亮的功能(自带类名)-router-link-exact-active router-link-active
-
-
2.跳转传参
-
1.在router-link上的to属性传值, 语法格式如下
-
1./path?参数名=值
-
2./path/值 – 需要路由对象提前配置 path: “/path/参数名”
-
-
2.对应页面组件接收传递过来的值
-
1.$route.query.参数名
-
2.$route.params.参数名
-
-
-
-
-
路由守卫
-
1.路由钩子函数
-
1.全局钩子： beforeEach(全局前置守卫)、 afterEach(全局后置钩子)
-
2.路由独享的守卫(在路由内配置时进行设置)： beforeEnter
-
3.组件内路由：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave
-
-
2.路由全局前置守卫
-
在路由对象上使用固定方法beforeEac
-
-
