This section is relatively small. It’s more of a reference to the official documentation for Vue-Router4.

But let’s take that out.

1: the router. Ts

/ / the official document: https://vue3js.cn/router4/guide/#html
// Import vue-router
import { createRouter, createWebHistory, createWebHashHistory, ErrorHandler } from "vue-router";
/** * defines the route array */
const routes = [
  {/ / 404 routing
    path: '/ 404'.name: '404'.component: () = >import('/@/views/404.vue')},];/** * Create a route */
const router = createRouter({
  // Hash mode: createWebHashHistory,
  // history mode: createWebHistory
  history: createWebHistory("/"),
  // history:createWebHashHistory("/#"),
  routes,
});
 
/** * Route error callback */
router.onError((handler: ErrorHandler) = > {
  console.log("error:", handler);
});
 
/** * outputs the object */
export default router;
Copy the code

2: Back-end server configuration (I’m using Nginx here) :

Please refer to the official documentation for this part:

Next.router.vuejs.org/guide/essen…

location / {
  try_files $uri $uri/ /index.html;
}
Copy the code

3: request link writing

However, there may be a problem with the # removed route when used with the PHP framework, because the link does not know whether to go to the back-end or front-end route.

The solution to this problem is actually quite simple.

PHP is added before the connection is requested, so that the front-end connection does not have problems when jumping.

As follows:

// Introduce a public js file

import request from "/@/hooks/request";
 
/ * * *@name: Submit a message *@author: camellia
 * @email: guanchao_gc@qq.com
 * @date: the 2021-03-01 * /
export const putmessage = (data: any) = > request.get("/index.php/about/putmessage", data, ' ');
Copy the code

For good suggestions, please enter your comments below.

Welcome to my blog guanchao.site

Welcome to applets: