第二十一节——路由初识

文档地址
Vue Router | Vue.js 的官方路由

version

V4.x

一、什么是路由

前端路由指的是一种将浏览器URL与特定页面或视图关联起来的技术。在传统的Web开发中，当用户点击链接或者输入URL时，服务器会接收到请求并返回相应的HTML页面。而在前端路由中，当用户点击链接或者输入URL时，浏览器会根据路由规则对URL进行解析，并使用JavaScript控制页面的展示。

前端路由通常使用JavaScript库来实现，比如React Router、Vue Router等。它们允许开发者定义路由规则，并根据这些规则来显示不同的组件或页面。例如，当用户点击一个链接时，前端路由会将URL解析为一个路由路径，然后根据路径匹配相应的组件或页面并显示在页面上，而不需要向服务器发起请求。

前端路由可以提高Web应用的性能和用户体验，因为它允许应用实现快速的页面切换和动态的内容加载，同时减少了服务器的负载。

二、安装

npm install vue-router

三、路由模式

1、hash模式

使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载，其显示的网路路径中会有 “#” 号，有一点点丑。比如Example Domain。这是最安全的模式，因为他兼容所有的浏览器和服务器。

2、history模式

依赖于Html5 的history，pushState API,所以要担心IE9以及一下的版本，感觉不用担心。并且还包括back、forward、go三个方法，对应浏览器的前进，后退，跳转操作。就是浏览器左上角的前进、后退等按钮进行的操作

3、abstract 模式（了解）

abstract 是vue路由中的第三种模式，本身是用来在不支持浏览器API的环境中，充当fallback，而不论是hash还是history模式都会对浏览器上的url产生作用，本文要实现的功能就是在已存在的路由页面中内嵌其他的路由页面，而保持在浏览器当中依旧显示当前页面的路由path，这就利用到了abstract这种与浏览器分离的路由模式

四、定义路由表

1、在src下创建router目录，并在目录里创建index.js文件

import { createRouter, createWebHashHistory } from 'vue-router'

/**
 * 使用 createRouter 创建路由实例
 */
const router = createRouter({
  // 确定路由模式,当前使用hash模式
  history: createWebHashHistory(),
  /**
   * 定义路由表
   */
  routes: [
    {
      // 路由地址
      path: "/a",
      // 对应路由显示组件
      component: () => import('./../a.vue')
    }
  ]
})

/**
 * 导出
 */
export default router

2、在入口文件引入，并挂载

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

const app = createApp(App)

// 使用 use方法挂载到vue上
app.use(router)
app.mount('#app')

3、在根组件上使用router-view展示路由

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

4、查看页面