实例路由hash模式和history模式共存解决方法

2 阅读1分钟

需求原因:原本的项目都是hash模式的,但是后续有些页面需要给到微信那边,微信那边不能带有#,而之前的hash模式的部分链接固定在了Flutter的webview中,所以需要两者模式共存,既不影响之前的调用也能提供给微信那边调用

  • 要调整的项目主要技术栈是:vue2.6.12 + webpack5.11.0
  • 修改之前访问check页面的链接为:http://localhost:3000/#/index 如下图: image.png

步骤一:再次新增一个routerHis.js把router的mode改成history

import Vue from 'vue';
import Router from 'vue-router';
 
Vue.use(Router);
 
const routerHis = new Router({
  mode: 'history', // 指定为history模式
  routes: [
    // 定义路由
  ]
});
 
export default routerHis;

main.js上的router设置

import Vue from 'vue'
import router from './router/index'
import router1 from './router/index1'
let vue = new Vue({
  ...
  // router,
  router: router1 && router,
  ...
})
window.vue = vue

可是在这里末尾还是会自动加上# :http://localhost:3000/index#/ ,如下图

image.png

history末尾还是自动补上#问题?【后续解决补充】