vueRouter

前端路由阶段

◼ 前后端分离阶段：

◼ 随着Ajax的出现, 有了前后端分离的开发模式.
◼ 后端只提供API来返回数据, 前端通过Ajax获取数据, 并且可以通过JavaScript将数据渲染到页面中.
◼ 这样做最大的优点就是前后端责任的清晰, 后端专注于数据上, 前端专注于交互和可视化上. ◼ 并且当移动端(iOS/Android)出现后, 后端不需要进行任何处理, 依然使用之前的一套API即可.
◼ 目前很多的网站依然采用这种模式开发.
◼ 单页面富应用阶段:
◼ 其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.
◼ 也就是前端来维护一套路由规则

vue-router

vue-router是基于路由和组件的

◼ 路由用于设定访问路径, 将路径和组件映射起来.
◼ 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.

创建router实例

挂载到Vue实例中

步骤一：创建路由组件

步骤二：配置组件和路径的映射关系

步骤三：使用路由

: 该标签是一个vuerouter中已经内置的组件, 它会被渲
染成一个标签.

◼ : 该标签会根据当前
的路径, 动态渲染出不同的组件.

➢ 网页的其他内容, 比如顶部的标题/
导航, 或者底部的一些版权信息等
会和处于同一个等
级.

➢ 在路由切换时, 切换的是<routerview>挂载的组件, 其他内容不会发
生改变.

路由的默认路径

◼ 我们这里还有一个不太好的实现:
◼ 默认情况下, 进入网站的首页, 我们希望渲染首页的内容.

◼ 但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以.
◼ 如何可以让路径默认跳到到首页, 并且渲染首页组件呢?
◼ 非常简单, 我们只需要配置多配置一个映射就可以了.
◼ 配置解析:
◼ 我们在routes中又配置了一个映射.
◼ path配置的是根路径: /
◼ redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了.

H5的history

◼ 改变路径的方式有两种:
◼ URL的hash
◼ HTML5的history
◼ 默认情况下, 路径的改变使用的URL的hash.
◼ 如果希望使用HTML5的history模式, 非常简单, 进行如下配置即可:

router-link补充

在前面的中, 我们只是使用了一个属性: to, 用于指定跳转的路径.
◼ 还有一些其他属性:

◼ tag: tag可以指定之后渲染成什么组件, 比如上面的代码会被渲染成一个

• 元素, 而不是

• ◼ replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中

  ◼ active-class: 当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称.

  ◼ 在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类.

  ◼ 但是通常不会修改类的属性, 会直接使用默认的router-link-active即可

  修改linkActiveClass

  ◼ exact-active-class

  ➢ 类似于active-class, 只是在精准匹配下才会出现的class.
  ➢ 后面看到嵌套路由时, 我们再看下这个属性.

  ◼ 该class具体的名称也可以通过router实例的属性进行修改

  

  路由代码跳转

  

  动态路由

  在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：
  ◼ /user/aaaa或/user/bbbb
  ◼ 除了有前面的/user之外，后面还跟上了用户的ID
  ◼ 这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。

  

  

  路由的懒加载

  

  懒加载的方式

  

  嵌套路由

  嵌套路由是一个很常见的功能

  ◼ 比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容.

  ◼ 一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件.

  路径和组件的关系如下:

  

  实现嵌套路由有两个步骤:

  ➢ 创建对应的子组件, 并且在路由映射中配置对应的子路由.

  ➢ 在组件内部使用标签.

  嵌套路由实现

  

  

  嵌套默认路径

  

  传递参数的方式

  • 传递参数主要有两种类型: params和query

  • params的类型:

  • 配置路由格式: /router/:id

  • 传递的方式: 在path后面跟上对应的值
  • 传递后形成的路径: /router/123, /router/abc

  • query的类型:

  • 配置路由格式: /router, 也就是普通配置

  • 传递的方式: 对象中使用query的key作为传递方式
  • 传递后形成的路径: /router?id=123, /router?id=abc

  传递参数方式一:<router-link>

  

  传递参数方式二: JavaScript代码

  

  获取参数

  获取参数通过$route对象获取的.

  ◼ 在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route ，并且当路由切换时，路由对象会被更新。

  ◼ 通过$route获取传递的信息如下:

  

  $route和$router是有区别的

  

  

  导航守卫

  ◼ vue-router提供的导航守卫主要用来监听监听路由的进入和离开的.

  ◼ vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发.

  导航守卫使用

  首先, 我们可以在钩子当中定义一些标题, 可以利用meta来定义
  其次, 利用导航守卫,修改我们的标题

  导航钩子的三个参数解析:

  ➢ to: 即将要进入的目标的路由对象.

  ➢ from: 当前导航即将要离开的路由对象.

  ➢ next: 调用该方法后, 才能进入下一个路由.

  

  导航守卫补充

  如果是后置钩子, 也就是afterEach, 不需要主动调用next()函数.

  keep-alive

  keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

  ◼ 它们有两个非常重要的属性:

  ◼ include - 字符串或正则表达，只有匹配的组件会被缓存

  ◼ exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

  ◼ router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存：

  ◼ 通过create声明周期函数来验证