前端路由、vue-router常见用法、路由重定向、动态路由匹配、声明式导航 & 编程式导航 、导航守卫

前端路由的概念与原理

路由（英文：router）就是对应关系
SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。
此时，不同组件之间的切换需要通过前端路由来实现。
结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成

前端路由

通俗易懂的概念：Hash 地址与组件之间的对应关系
. 前端路由的工作方式
① 用户点击了页面上的路由链接
② 导致了 URL 地址栏中的 Hash 值发生了变化
③ 前端路由监听了到 Hash 地址的变化
④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中

vue-router 的基本使用

vue-router 安装和配置的步骤
① 安装 vue-router 包
② 创建路由模块

import Vue from "vue"
import VueRouter from "vue-router"
//调用vue.use函数把vueRouter安装为vue的插件
Vue.use(VueRouter)
// 创建路由的实例对象
const router = new VueRouter()
// 向外共享路由的实例对象
export default router

③ 导入并挂载路由模块
④ 声明路由链接和占位符

在 src/App.vue 组件中，使用 vue-router 提供的 和 声明路由链接和占位符：

  <div class="app-container">
    <h1>App2 组件</h1>
    <router-link to="/home">首页</router-link>
    <router-link to="