vue-route路由的使用技巧

982 阅读2分钟

我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第1篇文章,点击查看活动详情

1.前端路由的概念与原理

路由(router):对应关系

SPA(单页面应用程序)与前端路由

前端路由:hash地址与组件之间的对应关系

前端路由的工作方式

  1. 用户点击了页面上的路由链接
  1. 导致了url地址栏中的Hash值发生了变化
  1. 前端路由监听了到Hash地址的变化

  1. 前端路由把当前Hash地址对应的组件渲染的浏览器中

2. vue-router的基本使用

  1. 安装vue-router包

npm i vue-router -s

  1. 创建路由模块

在src源代码目录下,新建rount/index.js路由模块,并初始化如下代码:

  1. 导入并挂载路由模块

  1. 声明路由链接和占位符

app

3. vue-rount的常见用法

1. 嵌套路由:通过children属性声明子路由规则

2. 动态路由匹配:

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

以上路由如何取得id值?

3. 声明式导航&编程式导航

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

在浏览器中,调用API方法实现导航的方式,叫做编程式导航。例如:

  • 普通网页中调用location.href跳转到新页面的方式,属于编程式导航

\

Vue-router提供了许多编程式导航的API,其中最常用的导航API分别是:

  1. this.$router.push('hash地址') 跳转到指定的hash地址,并增加一条历史记录
  1. this.$router.replace('hash地址') 跳转到指定的hash地址,并替换掉当前的历史记录
  1. this.$router.go(数值n)

调用go方法,可以在浏览器历史中前进和后退.

4. 导航守卫

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

全局前置守卫:

每次发生路由的导航跳转时,都会触发全局前置守卫。因此,在全局前置守卫中,程序员可以对每个路由进行访问权限的控制:

全局前置守卫的回调函数中接收3个形参,格式为:

next函数的3种调用方式

参考示意图,分析next函数的3种调用方式最终的结果

\

\

多个路径需要设置权限时,可使用数组存储