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模式