vue-router的原理

概述

• Vue 路由允许我们通过不同的 URL 访问不同的内容。
• 通过 Vue 可以实现多视图的单页 Web 应用

实现方式

前端路由的实现，一般包括两种模式：

• History 模式
• Hash 模式（默认的模式）

两者的区别

Hash模式

特点：

Hash指的是url的锚点(即：在浏览器中符号的“#”，以及#后面的字符)，当锚点发生变化的时候，浏览器只会修改历史访问记录，不会访问服务端重新获取页面。
Hash 模式下,仅 hash 符号之前的内容会被包含在请求中因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

优点：

• 不用每次刷新都向后端发送请求
• 兼容性好：可以兼容一些低版本的浏览器

缺点：

不够美观

例子:

import {createApp} from 'vue'
import {createRouter,createWebHistory,createWebHashHistory} from 'vue-router'
import App from './App.vue'
import myroutes from './routers/router.js'
let app=createApp(App)
// 创建路由实例
let router=createRouter({
    history:createWebHashHistory(),
    routes:myroutes
})
app.use(router)
app.mount('#app')

效果展示：

主要看上面地址栏：http://localhost:3000/#/home
他会有锚点变化的历史记录

History模式

特点：

Html5的history对象提供了pushState和replaceState两个方法
pushState()：有历史记录
replaceState()：无历史记录
事件popState:按返回键时倒退
History 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致.如果不一致，将返回 404 错误。

优点：

美观

缺点：

• 兼容性不够好
• 每次刷新都要向后端发送请求

例子:

import {createApp} from 'vue'
import {createRouter,createWebHistory,createWebHashHistory} from 'vue-router'
import App from './App.vue'
import myroutes from './routers/router.js'
let app=createApp(App)
// 创建路由实例
let router=createRouter({
    history:createWebHashHistory(),
    routes:myroutes
})
app.use(router)
app.mount('#app')

效果展示：

主要看上面地址栏：http://localhost:3000/home