import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    {
      path: '/index/home',
      component: () => import('../views/index/Home.vue'),
    },
    {
      path: '/home',
      component: () => import('../views/home/Index.vue'),
    },
    {
      path: '/me',
      component: () => import('../views/me/Index.vue'),
    },
  ],
})

router.beforeEach((to, from) => {
  return true
})

export default router
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.

不兼容：

server {
        listen 80;
        server_name localhost chat.test.com;

        #配置根目录
        location / {
            root    /temp/test;
            index  index.html index.htm;
            add_header Content-Security-Policy upgrade-insecure-requests;
        }
    }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

vue3+vue-router4 路由HTML5模式（createWebHistory ），编译后部署到nginx，点击路由跳转正常，但是刷新页面报404_根目录

解决方案：

server {
        listen 80;
        server_name localhost chat.test.com;

        #配置根目录
        location / {
            root    /temp/test;
            #index  index.html index.htm;
            try_files $uri $uri/ /index.html;
            add_header Content-Security-Policy upgrade-insecure-requests;
        }
    }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

vue3+vue-router4 路由HTML5模式（createWebHistory ），编译后部署到nginx，点击路由跳转正常，但是刷新页面报404_nginx_02

参考链接

 https://router.vuejs.org/zh/guide/essentials/history-mode.html#nginx