VueRouter 使用 mode: ‘history‘ 嵌套路由 打包路径错误的问题

VueRouter 默认是hash模式,但是url上会带上#字符,非常不好看,会影响一些场景下的url解析, history 模式下没有 #,但是history 模式下对打包就出现了路径不对的问题,通过修改 项目根目录下 \build\webpack.prod.conf.js 解决 

  output: {
    publicPath: '/',
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },

把 publicPath 由相对路径 './' 改为i绝对路径 '/'

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue嵌套路由的配置步骤如下: 1. 在主路由文件中(通常是 `router/index.js`),导入 `Vue` 和 `VueRouter` 并使用 `Vue.use(VueRouter)` 注册路由插件。 2. 创建路由实例,定义路由规则,并在 `routes` 数组中添加子路由。 3. 在主组件(通常是 `App.vue`)中添加 `<router-view>` 标签,这个标签会根据当前路由匹配到的组件渲染子组件或子路由。 4. 在子路由组件中添加 `<router-view>` 标签以渲染子组件或子路由。 以下是一个简单的示例: ```javascript // router/index.js import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', component: Home, children: [ { path: '', component: Dashboard }, { path: 'profile', component: Profile } ] }, { path: '/about', component: About } ] const router = new VueRouter({ mode: 'history', routes }) export default router ``` ```html <!-- App.vue --> <template> <div id="app"> <router-view></router-view> </div> </template> ``` ```html <!-- Home.vue --> <template> <div> <h1>Home</h1> <router-view></router-view> </div> </template> ``` ```html <!-- Dashboard.vue --> <template> <div> <h2>Dashboard</h2> </div> </template> ``` ```html <!-- Profile.vue --> <template> <div> <h2>Profile</h2> </div> </template> ``` 在这个示例中,访问 `/` 路径会渲染 `Home` 组件,并显示 `Dashboard` 子组件。访问 `/profile` 路径会渲染 `Home` 组件,并显示 `Profile` 子组件。访问 `/about` 路径会渲染 `About` 组件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值