VUE3（十八）vue 路由history 模式去掉 URL 中

这部分内容比较少。其实更多的是参考一下vue-router4的官方文档就好。

但是，这部分还是拿出来说一下。

1：router.ts

// 官方文档：https://vue3js.cn/router4/guide/#html
// 引入vue-router对象
import { createRouter, createWebHistory, createWebHashHistory, ErrorHandler } from "vue-router";
/**
 * 定义路由数组
 */
const routes = [
  {// 404路由
    path: '/404',
    name: '404',
    component: ()=>import('/@/views/404.vue')
  },
];
 
/**
 * 创建路由
 */
const router = createRouter({
  // hash模式：createWebHashHistory，
  // history模式：createWebHistory
  history: createWebHistory("/"),
  // history:createWebHashHistory("/#"),
  routes,
});
 
/**
 * 路由错误回调
 */
router.onError((handler: ErrorHandler) => {
  console.log("error:", handler);
});
 
/**
 * 输出对象
 */
export default router;

2：后端服务器配置（我这里使用的是nginx）：

这部分请参考官方文档：

https://next.router.vuejs.org/guide/essentials/history-mode.html

location / {
  try_files $uri $uri/ /index.html;
}

3：请求链接书写方式

但是，去掉#之后的路由在配合php框架使用的时候可能会有问题，就是这个链接不知道该去后端还是去前端的路由。

解决这个问题其实也很简单。

就是在请求连接前加入index.php，这样前端连接在跳转的时候就不会出问题。

如下所示：

// 引入公共js文件

import request from "/@/hooks/request";
 
/**
 * @name: 提交留言
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2021-03-01 
 */
export const putmessage = (data: any) => request.get("/index.php/about/putmessage", data, '');

有好的建议，请在下方输入你的评论。

欢迎访问个人博客
https://guanchao.site