认识vue-route

认识vue-route

目前前端流行的三大框架, 都有自己的路由实现:

Angular的ngRoute

React的ReactRoute

Vue的vue-route

当然, 我们的重点是vue-route

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。

我们可以访问其官方网站对其进行学习: https://router.vuejs.org/zh/

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

路由用于设定访问路径, 将路径和组件映射起来.

在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.

安装和使用vue-route

因为我们已经学习了webpack, 后续开发中我们主要是通过工程化的方式进行开发的.

所以在后续, 我们直接使用npm来安装路由即可.

步骤一: 安装vue-route

npm install vue-router --save

步骤二: 在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)

第一步：导入路由对象，并且调用 Vue.use(VueRouter)

第二步：创建路由实例，并且传入路由映射配置

第三步：在Vue实例中挂载创建的路由实例

使用vue-router的步骤:

第一步: 创建路由组件

第二步: 配置路由映射: 组件和路径映射关系

第三步: 使用路由: 通过<router-link>和<router-view>

import Vue from ‘vue’

import VueRouter from ‘vue-router’

Vue.use(VueRouter)

创建router实例

挂载到Vue实例中

步骤一：创建路由组件

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

步骤三：使用路由.

<router-link>: 该标签是一个vue-router中已经内置的组件, 它会被渲染成一个<a>标签.

<router-view>: 该标签会根据当前的路径, 动态渲染出不同的组件.

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

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

最终效果如下

细节处理

路由的默认路径

我们这里还有一个不太好的实现:

默认情况下, 进入网站的首页, 我们希望<router-view>渲染首页的内容.

但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以.

如何可以让路径默认跳到到首页, 并且<router-view>渲染首页组件呢?

非常简单, 我们只需要配置多配置一个映射就可以了.

配置解析:

我们在routes中又配置了一个映射.

path配置的是根路径: /

redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了.