vue3.0路由设置问题

基础路由设置

router/index.js

1、路由模式的设置，hash或者history模式设置

import {
    
     createRouter, createWebHistory,createWebHashHistory } from 'vue-router'
import routes from './router'
const router = createRouter({
    
    
    history: createWebHistory(),// history模式
    // history: createWebHashHistory(),// Hash模式
    routes
});
export default router

2、如果想在url前边拼接上指定的前缀，如拼接前地址为：http://localhost:8080/dataAnalysis，要拼接成http://localhost:8080/prediction/dataAnalysis，设置如下

// vue2.0设置
const router = new VueRouter({
    
    
  mode: "history",
  base: '/prediction',
  routes,
});
// vue3.0设置
const router = createRouter({
    
    
    history: createWebHistory('/prediction'),// history模式
    // history: createWebHashHistory(),// Hash模式
    routes
});

3、设置vue.config.js，没有该文件的时候新建一个

module.exports = {
    
    
    // publicPath默认值是'/'，即你的应用是被部署在一个域名的根路径上
  // 设置为'./'，可以避免打包后的静态页面空白
  // 当在非本地环境时，这里以项目prediction为例，即打包后的h5项目部署服务器的prediction目录下
  // 那么这里就要把publicPath设置为/prediction，表示所有的静态资源都在/prediction里
  // 打包部署后，会发现index.html引用的静态资源都添加了路径/prediction
  publicPath: process.env.NODE_ENV == 'development' ? './' : '/prediction'
}

设置之后，vue项目启动后的地址就会拼上了/prediction，如下