这部分内容比较少。其实更多的是参考一下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）：
这部分请参考官方文档：
next.router.vuejs.org/guide/essen…
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, '');
