Vue路由（Vue-router）

1.1 路由

2. 前端路由

概念：根据不同的用户事件，显示不同的页面内容

本质：用户事件与事件处理函数之间的对应关系

3. 实现简易前端路由

基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）

Vue Router（官网：https://router.vuejs.org/zh/）是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，可以非常方便的用于SPA应用程序的开发。

Vue Router 包含的功能有：

支持HTML5 历史模式或 hash 模式

支持嵌套路由

支持路由参数

支持编程式路由

支持命名路由

3. vue-router的基本使用

1. 基本使用步骤

1. 引入相关的库文件 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

2. 添加路由链接

<router-link to="/user">User</router-link>

<router-link to="/register">Register</router-link>

3. 添加路由填充位

<router-view></router-view>

4. 定义路由组件

5. 配置路由规则并创建路由实例

6. 把路由挂载到 Vue 根实例中

4.路由重定向

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

6.vue-router嵌套路由

1. 嵌套路由用法

1.1. 嵌套路由功能分析

点击父级路由链接显示模板内容

模板内容中又有子级路由链接

点击子级路由链接显示子级模板内容

效果图：

2. 父路由组件模板

父级路由链接

父组件路由填充位

3. 子级路由模板

子级路由链接

子级路由填充位

4. 嵌套路由配置

父级路由通过children属性配置子级路由

7.动态匹配路由的基本用法

应用场景：通过动态路由参数的模式进行路由匹配

8.vue-router编程式导航

1. 页面导航的两种方式

声明式导航：通过点击链接实现导航的方式，叫做声明式导航例如：普通网页中的<a>链接或 vue 中的 <router-link></router-link>

编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航例如：普通网页中的 location.href

2. 编程式导航基本用法

常用的编程式导航 API 如下：

this.$router.push('hash地址')

this.$router.go(n)

路由导航守卫

例如登录：我们不希望在未登录时(就是没有当前用户的token)就可以访问其他页面

使用router.beforeEach()

创建router对象

const router = new VueRouter();

// 挂载路由导航守卫

router.beforeEach((to, from, next) => {

// to 将要访问的路径

// from 代表从哪个路径跳转而来

// next 是一个函数,表示放行

// next() 放行 next('/login') 强制跳转

// 判断用户访问的是否是登录页

if (to.path === '/login') return next()

// 获取token

const tokenStr = window.sessionStorage.getItem('token')

if (!tokenStr) return next('/login')

next()

})