vue3 - 32.router.2 - 路由模式

啦啦朵朵

已于 2022-11-14 10:47:55 修改

阅读量321

点赞数

文章标签： vue.js javascript ecmascript

于 2022-11-12 22:20:14 首次发布

本文链接：https://blog.csdn.net/qq_34111842/article/details/127826447

版权

我们需要通过vue-router当中声明路由模式，比如路由模式是哈希还是history

比如：

import {
    createWebHistory,
    createWebHashHistory,
    createMemoryHistory
} from "vue-router";

其中在vue2当中声明和vue3当中声明的方法的名称有一些变化：

1.vue2和vue3模式的区别：

vue2 mode => history
vue3 mode => createWebHistory

vue2 mode => hash
vue3 mode => createWebHashHistory

vue2 mode => abstact
vue3 mode => createMemoryHistory

2.vue router，history和哈希的区别：

哈希类型：
哈希类型路径会带/#，原理是location.hash去匹配，当我们在控制台输入的时候，会返回一个#/，监听路由变化的原理是通过window.addEventListener，有一个hashchange回调函数，通过event去监听左右箭头的变化，通过event回调函数会返回newURL和oldURL

history类型：
跳转是没有#的，history是基于H5的history方法实现的，监听路由变化的原理是通过window.addEventListener，有一个popstate回调函数，通过event去监听的，会返回一个state对象，里面有back（上一个url地址）current（当前url地址）forward，跳转是通过history.pushstate结合vue内置跳转方法实现跳转的