logo 有点东西

History模式 带参数链接刷新后显示404的问题

已经按照Vue Router文档配置了nginx

1
2
3
location / {
  try_files $uri $uri/ /index.html;
}

当使用这样的方式跳转页面后，刷新页面会触发404

1
2
3
4
5
6
7
this.$router.push({
    path: '/info',
    query: {
        id
    }
})
// 浏览器url http://www.aaa.com/farmInfo?id=aaa

解决方法：使用动态路由匹配

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// router.js
{
    name: 'info',
    path: '/info/:id',
    component: () => import('@/views/Info.vue')
}

// 使用param传参
this.$router.push({
    name: 'farmInfo',
    params: {
        id: id
    }
})

History模式 带参数链接刷新后显示404的问题

作者：有点东西

链接： https://www.youdiandongxi.com/article/vue-history-404.html

协议：本文采用 CC BY-NC-SA 4.0 隐私协议，转载请注明出处！

上一篇：《vue/cli@+vue2 vant主题定制的配置方式》 下一篇：《使用APNG替代GIF格式的动态图片》

其他推荐内容

vue入门笔记
  • 2019/02/14
    • 编程

vue入门笔记

v-for创建重复组件导致重复请求接口的BUG
  • 2021/04/25
    • 编程

v-for创建重复组件导致重复请求接口的BUG

vux初体验 （二）安装vue-devtool
  • 2017/12/21
    • 编程

vux初体验 （二）安装vue-devtool

评论区