Vue使用Vue Router路由：开发单页应用

Vue 使用 Vue Router 路由系列文章：

《Vue使用Vue Router路由：开发单页应用》

《Vue使用Vue Router路由：通过URL传递与获取参数》​​​​​​​

《Vue3.0使用JavaScript脚本实现Vue Router路由：页面跳转、获取URL参数》​​​​​​​

1、路由基础

在单页 Web 应用中，整个项目只有一个 HTML 文件，不同视图（组件的模块）的内容都是在同一个页面中渲染的。当用户切换页面时，页面之前的跳转都是在浏览器端完成的，这时就需要使用前端路由。

路由实际上就是一种映射关系。例如，多个选项卡之间的切换就可以使用路由功能来实现。在切换时，根据鼠标的点击事件显示不同的页面内容，这相当于事件和事件处理程序之间的映射关系。

1.1 引入 Vue Router

在使用 Vue Router 之前需要在页面中进行引入，可以使用 CDN 方式引入 Vue Router。代码如下：

如果在项目中 Vue Router，则可以使用 npm 方式进行安装。在命令提示符窗口中输入如下命令：

npm install vue-router@next --save

说明：

在安装 Vue Router 时，要安装支持 Vue 3.0 版本的 Vue Router 需要使用 vue-router@next，要安装支持 Vue 2.x 版本的 Vue Router 需要使用 vue-router。

1.2 基本用法

使用 Vue.js 创建的应用程序可以由多个组件组成，而 Vue Router 的作用是将每个路径映射到对应的组件，并通过路由进行组件之间的切换。

Vue.js 路由的思想是通过不同的 URL 访问不同的内容。要想通过路由实现组件之间的切换，需要使用  Vue Router 提供的 组件，该组件用于设置一个导航链接，通过设置 to 属性链接到一个目标地址，从而切换不同的 HTML 内容。实际的浏览器页面中 组件默认会被渲染成 标签。下面是一个实现路由的简单示例，实现步骤如下。

（1）使用 组件设置导航链接。

首页
课程
关于

（2）通过  指定组件在何处渲染。

1.3 命名路由

在某些时候，在进行路由跳转时，通过一个名称来标识路由会更方便一些。可以在创建 Vue Router 实例时，在 routes 配置中为某个路由设置名称。

示例代码如下：

const routes = [
  {
    path: '/course/list',
    name: 'courseList',
    component: CourseView,
    meta: {
      title: '课程列表'
    }
  }
]

在设置了路由的名称后，要想链接到该路径，可以将 组件的 to 属性设置成一个对象，同时需要使用 v-bind 指令。

代码如下：

课程

这样&#