zoukankan      html  css  js  c++  java
  • vue-cli3使用vue-router 使用动态路由,在刷新页面时报错

    刚发现的一个问题,在使用vue-cli3创建项目之后,使用动=动态路由,demo:

    {
          path: '/aa/:id',
          name: 'aa',
          component: aa
        },

    编程式路由:

    this.$router.push({name:'aa',params:{id:1}});

    页面跳转成功,参数也可以获取到,但是在刷新页面时,报错了

    其他方式的路由都没有问题,找了半天不知道怎么回事儿,后来看了一下vue.config.js,publlicPath:'./'写的是相对路径,修改publicPath:'/',重新启动就可以了,

    查看vue-cli的publicPath之后明白,publicPath默认是/,它会假设应用被部署到一个域名的根目录上,当被部署到一个子路径时,需要修改为:/子路径/;

    可以修改为空字符串或者相对路径,这样就不用管项目部署的路径,所有的资源加载都是相对路径。

    但是相对路径有限制,在下面的情况应该避免使用:

    1 当时用h5 history.pushState的路由时,

    2 当使用pages构建多页面应用时

    参考:https://cli.vuejs.org/zh/config/#publicpath

    vue-router的mode是history的情况下回发生上述问题,如果改成hash,使用默认值,publicPath可以使用相对路径,没有问题

    ,在histroy模式下,使用动态路由,publicpath不能是相对路径

    因为打包之后,静态资源文件的路径问题,需要把publicPath改成相对路径,最后就修改为:

    publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
  • 相关阅读:
    [转]QTP 怎样连接mysql数据库操作
    [转]使用Eclipse来开发Android源码
    组合排序
    插入排序
    冒泡排序
    选择排序
    计数排序
    希尔排序
    合并排序
    鸡尾酒排序
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/11290090.html
Copyright © 2011-2022 走看看