vue3.0路由设置问题

笑毅

已于 2022-07-20 15:21:08 修改

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue3.0 Vue 文章标签： javascript vue.js 前端

于 2022-07-18 16:55:29 首次发布

本文链接：https://blog.youkuaiyun.com/qq_36877078/article/details/125854924

Vue 同时被 2 个专栏收录

13 篇文章

订阅专栏

2 篇文章

订阅专栏

本文详细介绍了Vue项目中如何进行基础路由设置，包括选择hash或history模式，以及如何在URL前拼接指定前缀。在Vue 2.0和3.0中，配置略有不同。此外，还讲解了vue.config.js中publicPath的设置，以确保在不同环境中正确部署项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基础路由设置

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'
}