Vue笔记总结（Xmind格式）：第七天

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

详细Xmind原文档，在文章顶部自取下载！