5.5 Vue2.0 路由&嵌套路由&动态路由&编程式导航&导航守卫

前端路由的概念与原理

1，什么是路由

路由：就是对应关系。

2，SPA 与前端路由

SPA 指定是一个 web 网站只有唯一的一个HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由来实现。
前端路由 通俗移动的概念：Hash 地址(锚链接)与组件之间的对应关系。

3，前端路由的工作方式

1. 用户点击了页面上的路由链接。
2. 导致了URL地址栏中的Hash值发生了变化
3. 前端路由监听到了Hash 地址的变化
4. 前端路由把当前 Hash 地址对应的组件 渲染到浏览器中
   

vue-router 的基本使用

vue-router 是 vue.js 官方给除的路由解决方案。它只能结合 vue 项目进行使用，能够轻松管理SPA项目中的组件的切换。

vue-fouter 官方文档地址：

1，vue-router 安装和配置的步骤

1. 安装 vue-fouter 包
2. 创建路由模块
3. 导入并挂载路由模块
4. 声明路由链接和占位符

2，在项目中安装 vue-router

npm i vue-router -S

3，创建路由模块并声明路由的对应关系

在 src 源代码目录下，新建 router/index.js 路由模块，并初始化如下代码：

// 导入 vue 和 vuerouter 的包
import Vue from 'vue'
import VueRouter from 'vue-router'
//导入需要的组件
import Home from '@/component/Home.vue'
import Movie from '@/component/Movie.vue'

// 2,调用 vue.use() 函数,把 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)

// 3,创建路由签的实例对象
const router = new VueRouter({
// routes 是一个数组，作用：定义 ‘hash 地址’与组件之间的关系
   routes:[
    { path:'/home',component:Home},
    { path:'/movie',component:Movie},
	]
})

// 4,向外共享路由的示例对象
export default router

只要在项目中安装和配置了 vue-router ，就可以使用 router-view 这个占位符组件了

4，redirect 路由重定向

路由重定向指的是：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面。通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便的设置路由的重定向。

5，嵌套路由

通过路由实现组件的嵌套展示，叫做嵌套路由。

通过 children 属性声明子路由规则

vue-fouter 的常见用法-动态路由

示例：

1，动态路由的概念

动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。
在 vue-fouter 中使用英文冒号(:)来定义路由的参数项，示例如下：

获取当前组件下的传递过来的id值:
① 在当movie组件中log(this.$route.params.id)。this.$route 是路由的‘参数对象’。this.$router 是路由的’导航对象’。
② { path: '/movie/:id, component:Movie, props:true'} 开启props传参，在对应的组件 Movie 中使用props:['id'] 接收即可。

拓展query和fullPath

注意1：在 hash 地址中， / 后面的参数项，叫做’路径参数’，在路由’参数对象’中，需要使用 this.$route.params 来访问路径参数。
注意2：在 hash 地址中， ？ 后面的参数项，叫做’查询参数’，在路由’参数对象’中，需要使用 this.$route.query 来访问查询参数。

注意3：在 this.$route 中，path 只是路径部分，fullPath 是完整的地址。

声明式导航 & 编程式导航

在浏览器中，点击链接实现导航的方式，叫做声明式导航。例如：

• 普通网页中点击 <a>链接，vue项目中点击<router-link>都属于声明式导航。
  在浏览器中，调用API方法实现导航的方式，叫做编程式导航。例如：
• 普通网页中调用 location.href 跳转到新页面的方式，属于编程式导航。

1，vue-router 中的编程时导航API

vue-router 提供了许多编程式导航的API ，其中最常见的导航 API 分别是：
① this.$router.push(‘hash 地址’)
- 作用：跳转到指定的 hash 地址，并增加一条历史记录
② this.$router.replace(‘hash 地址’)
- 作用：跳转到指定的 hash 地址，并替换掉当前的历史记录
③ this.$router.go(数值 n)
- 作用：当n为-1时，会后退到上一个页面
- this.$router.go的简化用法：1）$router.back() 后退到上一个页面 ， 2）$router.forward() 前进到下一个页面。

路由传值

方式①url路径拼接

        // 传: 在发送数据的组件中router-link路径后使用?拼接键值对传值
        // <router-link to="/login?name=zhangsan&age=20"></router-link>
        // 接: 在接收数据的组件中, 使用this.$route.query接收数据
        // <h1>{{$route.query.name}}-{{$route.query.age}}</h1>

方式②友好url传值

        // 1.在路由配置对象中添加动态路由配置
        // { path: "/main/:name", component: MainCom }
        // 2.在路由跳转前的组件内,给路由路径后添加/拼接数据传值
        //  <router-link :to="'/main/'+msg">登录去主页</router-link> 
        // 3.在路由跳转后的组件内.使用$route对象调用params字段接收数据
        // {{$route.params.name}}  this.$route.params.name

方式③quer对象传值

        // 1.在路由跳转前的组件内,给to属性动态绑定一个对象,path设置路径   query设置字段
        // <router-link :to="obj">登录去主页</router-link> 
        // 2.在路由跳转后的组件内.,使用$route对象调用query字段接收数据
        // {{$route.query.name}} this.$route.query.name
        computed: {
                obj() {
                    return {
                        path: "/main",
                        query: { name: this.msg }
                    }
                }
            }

方式④命名路由传值

        // 1.在路由配置对象中添加name字段设置命名路由
        // { path: "/main", component: MainCom,name:"myobj" },
        // 2.在路由跳转前的组件内,给to属性动态绑定一个对象,name设置路由的名字   params设置字段
        // <router-link :to="myobj">登录去主页</router-link> 
        // 2.在路由跳转后的组件内.,使用$route对象调用query字段接收数据
        // {{$route.params.name}} this.$route.params.name

四种传值方式的区别

    	// params对象传值相比url/动态url/query对象传值的优缺点
        // 1, 优点: params字段传值对数据的类型和长度无限制, 
        // url传值和query传值都会把数据拼接到url上,长度有限制,数据类型只能是字符串, 
        // 2, 缺点: params字段传值,在页面刷新时数据会丢失
        // url传值和query传值都会把数据拼接到url上, 刷新页面,数据不会丢失

导航守卫

导航守卫可以控制路由的访问权限。示意图如下：

1，全局前置守卫

每次发送路由的导航跳转时，都会触发全局前置守卫。因此在全局前置守卫中，我们可以对每个路由进行访问权限的控制：

守卫方法的3个形参

2，next 函数的3种调用方式