1️⃣ 什么是路由

路由是根据不同的 url 地址展现不同的内容或页面。
早期的路由都是后端直接根据 url 来重载页面实现的，即后端控制路由。
后来页面越来越复杂，服务器压力越来越大，随着 ajax（异步刷新技术）的出现，页面的实现非重载就能刷新数据，让前端也可以控制 url 自行管理，前端路由由此而生。

1️⃣ 什么时候使用前端路由

前端路由更多用在单页应用上，也就是 SPA (Single Page Web Application)，在单页面应用中，大部分页面结果不变，只改变部分内容的使用。

1️⃣ 路由的注意点

路由组件通常存放在 pages 文件夹，一般组件通常存放在 component 文件夹
通过切换，”隐藏” 的路由组件，默认是被销毁的，需要的时候再去挂载
每个组件都有自己的 $route 属性，里面存储着自己的路由信息
整个应用只有一个 router， 可以通过组件的 $router 属性获取到
image.png

1️⃣ 使用路由

2️⃣ 安装路由

**npm install vue-router**

2️⃣ 新建路由文件

路由默认会渲染 routes 的第一条路由
将路由配置成一个新的 JS 文件, 在 main 中引入

  1.   1. base
  2.      1. 类型: string
  3.      2. 默认值: "/" 应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"。
  1. // router 文件下的 router.js 文件的基本配置
  2. import Vue from "vue";
  3. import VueRouter from "vue-router";
  5. Vue.use(VueRouter);
  7. const routes = [
  8.   {
  9.     path: '/login',
  10.     component: () => import('@/views/login'),
  11.     name: 'Login',
  12.   },
  13.   {
  14.     path: '/home',
  15.     component: () => import('@/views/home'),
  16.     name: 'Home',
  17.   }
  18. ];
  20. const router = new VueRouter({
  21.   mode: "history",
  22.   base: process.env.BASE_URL,        
  23.   routes,
  24. });
  26. export default router;

2️⃣ 在 main.js 中引入

  1. import router from './router/router.js'; // 引入路由
  2. new Vue({
  3.   router, // 使用路由
  4.   render: h => h(App),
  5. }).$mount('#app')

1️⃣ 路由组件文件的放置

将所有的路由组件和普通组件区分开来

  1.   1. 普通组件放在默认的 components 文件夹中
  2.   2. 路由组件在 src 文件下新建一个 pages 文件，将所有路由组件放置其中