vue history 和hash路由模式共存处理

vue history 和hash路由模式共存

因项目需要,提出同一个项目需要支持两种路由模式

vue 路由访问方式区别

有部分支持history访问路径

如 ：http://127.0.0.1:8020/admin/static/copyright/index，

有部分支持hash访问路径

如：http://127.0.0.1:8020/#/admin/static/copyright/index，

history 和hash的区别

hash 模式 (默认)

原理: 监听网页的hash值变化是onhashchange事件, 通过location.hash获取完整的 url，当 url 改变时，页面不会重新加载。感觉像是重载了, 但是实际上没有,SPA用的最多

history 模式

原理: 主要利用浏览器对象history对象 API 来改变URL, 不刷新页面，history有5个对象可以不刷新页面如下：

//state: 一个与指定网址相关的状态对象，可null
//title: 新页面的标题，可null
//url: 新的网址,必须与当前页面处在同一个域
history.pushState(state,title,url)
history.pushState({name:'zhangsan'},'新页面',‘/basic/index.html’) //
// history不刷新页面还包括:replaceState(),go(),back(),//相当于go(-1)forward()//相当于go(1)

history 和hash怎么共存

直接上代码,router文件添加如下代码作为中转路由,router 设置为history模式

//router文件添加如下代码作为中转路由{path: `/Route`,name: "Route",meta: {title: "中转路由"},component: resolve => require(["./views/pageRoutes/Route.vue"], resolve)},// 路由配置const router = new VueRouter({mode: "history",base: process.env.BASE_URL,routes,});

在新建一个route.vue ,用作路由模式转换

  >-view />>>import {routes} from "../../router";import VueRouter from "vue-router";export default {props:{path: {type: Object,required: true,},},router: new VueRouter({mode: "hash", // 定义另一种路由模式routes,}),//这里可以获取当前的路由路径和一些路由相关的信息mounted() {console.log("drawer router", this.$router,this.path);this.$router.push(this.path); },}
>

两种模式的访问方式

history模式：http://127.0.0.1:8020/admin/static/copyright/index

hash模式：http://127.0.0.1:8020/Route/#/admin/static/copyright/index

总结

只要是路径携带了/Route值，路由都会走hash模式，反之走history模式

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！