Vue全家桶(五)之Vue-Router路由 (概念及基本使用)

Vue全家桶 Vue全家桶地址

Vue全家桶(一)之基础指令

Vue全家桶(一)之常用特性

Vue全家桶(二)之组件化开发

Vue全家桶(三)之cli3脚手架

Vue全家桶(四)之ES6模块化与打包

Vue全家桶(五)之Vue-路由

Vue全家桶(六)之VueX状态管理

Vue接口调用（一）fetch用法

Vue接口调用（二）axios用法

Vue接口调用（三）async/await用法

Vue- 路由 路由地址

Vue- 路由 (概念及基本使用)

Vue- 路由 (常见用法)

✍目录总览：

路由的基本概念与原理

在开发中，路由分为： 后端路由 前端路由

1. 后端路由：

概念：根据不同的用户 URL 请求，返回不同的内容

本质：URL 请求地址与服务器资源之间的对应关系

2. SPA 与前端路由的关系

SPA （单页面应用程序）指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由来实现。

特点：

3. 前端路由

概念：Hash 地址与组件之间的对应关系。

5. 前端路由的工作方式

① 用户点击了页面上的路由链接

② 导致了 URL 地址栏中的 Hash 值发生了变化

③ 前端路由监听了到 Hash 地址的变化

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

6. 认识vue-

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

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

vue-是基于路由和组件的

vue-的基本使用 1. 安装

第一步：安装（两种方式）

npm install vue-router --save

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

2. 使用

一个完整的路由必须包含:路由链接和路由占位符、路由实例、路由规则链接的路由组件

使用vue-的步骤：

路由链接：该标签是一个vue-中已经内置的组件，他会被渲染成一个标签。

路由占位符：该标签会根据当前的路径，动态渲染出不同的组件。

最终效果：

3. 路由跳转方式