基础路由设置
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,如下