nginx导致vue设置history模式下的请求丢失参数

已于 2022-07-26 14:07:01 修改
阅读量2.3k 收藏 6
点赞数 2
分类专栏： nginx 文章标签： vue.js nginx 前端
于 2022-07-26 00:22:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44457062/article/details/125985979
版权

nginx导致vue设置history模式下的请求丢失参数

问题描述：

当访问下面的路径时参数会丢失：

http://ip/vuecay/path1/path2?name=cay

演示效果：

在这里插入图片描述

可以看到地址栏会发生变化，参数name=cay丢失，页面也没获取到参数的内容，请求也发生了301重定向。

上面是对情况的说明，接下来演示复现参数丢失的过程。

复现history模式请求丢参数的情景

vue相关的代码和nginx的日志格式都放在附录里了。

首先vue的模式设置为history：

mode: 'history'

接着设置location（有问题的）：

location /vuecay {
  root   html;
  index  index.html index.htm;
  # 匹配history模式，histoty模式必须要配置，hash模式可以不用配置
  #这里有两个坑：$uri/后面没有index.html,后面不会自动添加index.html，vuecay后面没有‘/’
  try_files $uri $uri/ /vuecay;
}

访问路径：

http://ip/vuecay/path1/path2?name=cay

访问截图：

在这里插入图片描述

nginx访问日志（只展示重点的信息）：

第一次请求发生了301

remote_addr:111.196.243.20 – remote_user:- – time_local:[25/Jul/2022:22:42:34 +0800] – request:"GET /vuecay/path1/path2?name=cay HTTP/1.1" – status:301 – body_bytes_sent:162 – http_referer:“-” – http_user_agent:“Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36” – http_x_forwarded_for:“-” – uri:/vuecay – args: – is_args: – request_body:- – query_string:

重定向后的请求

remote_addr:111.196.243.20 – remote_user:- – time_local:[25/Jul/2022:22:42:34 +0800] – request:“GET /vuecay/ HTTP/1.1” – status:200 – body_bytes_sent:583 – http_referer:“-” – http_user_agent:“Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36” – http_x_forwarded_for:“-” – uri:/vuecay/index.html – args:- – is_args: – request_body:- – query_string:-

  • 从截图中可以看到地址栏发生改变，参数丢失，第一次请求会发生301重定向，第二次请求地址发生改变，页面也没获取到参数。

  • 从nginx日志可以看出两次请求的高亮的部分的request和uri都有很大的变化，但是args（第二次多了‘-’）和is_args没什么变化

修改nginx配置解决参数丢失

上面的location的try_files的配置会导致history模式下的请求参数丢失：

location /vuecay {
  root   html;
  index  index.html index.htm;
  # 匹配history模式，histoty模式必须要配置，hash模式可以不用配置
  #这里有两个坑：$uri/后面没有index.html,后面不会自动添加index.html，vuecay后面没有‘/’
  try_files $uri $uri/ /vuecay;
}

改用这个location的try_files的配置就不会参数就丢失了。

主要的变化是try_files最后面的vuecay的后面多了一个‘/’

location /vuecay {
  root   html;
  index  index.html index.htm;
  # 匹配history模式，histoty模式必须要配置，hash模式可以不用配置
  #这里有两个坑：$uri/后面没有index.html,后面不会自动添加index.html。
  #vuecay后面有‘/index.html’,等同于“/”，vuecay后面有“/”会自动在“/”后面添加index.html
  try_files $uri $uri/ /vuecay/index.html;
}

#这两个loction是一样的

location /vuecay {
  root   html;
  index  index.html index.htm;
  # 匹配history模式，histoty模式必须要配置，hash模式可以不用配置
  #这里有两个坑：$uri/后面没有index.html,后面不会自动添加index.html。
  #vuecay后面有‘/index.html’,等同于“/”，vuecay后面有“/”会自动在“/”后面添加index.html
  #index.html可以不加，但是vuecay必须有‘/’
  try_files $uri $uri/ /vuecay/;
}

使用上面的访问路径：

http://ip/vuecay/path1/path2?name=cay

访问截图：

在这里插入图片描述

nginx访问日志（只展示重点信息）：

remote_addr:111.196.243.20 – remote_user:- – time_local:[25/Jul/2022:23:01:24 +0800] – request:“GET /vuecay/path1/path2?name=cay HTTP/1.1” – status:200 – body_bytes_sent:583 – http_referer:“-” – http_user_agent:“Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36” – http_x_forwarded_for:“-” – uri:/vuecay/index.html – args: – is_args: – request_body:- – query_string:

  • 从截图可以看出来，地址栏未发生变化，正常显示参数，请求不会发生301，页面正常显示获取的参数。

  • 从nginx的访问日志来看确实也没有请求发生301，和上面loction发生301之后的请求相比，args后面没有‘-’，is_args没有变化。但是和我的预期不符合，request的请求路径里有参数（和下面hash解决参数的request后面的请求路径做对比），所以我以为args后面会有值，is_args也会有值（有值的情况可以看下面的拓展），但是两个都没有值，这是疑惑点，待解决。

  • 总的来说，在vuecay后面添加‘/’，确实可以解决丢参数的问题。

对比两种情形的location配置

history模式丢参数的location中的try_files配置：

location /vuecay {
  root   html;
  index  index.html index.htm;
  # 匹配history模式，histoty模式必须要配置，hash模式可以不用配置
  #这里有两个坑：$uri/后面没有index.html,后面不会自动添加index.html，vuecay后面没有‘/’
  try_files $uri $uri/ /vuecay;
}

history模式不丢参数的location中的try_files配置：

location /vuecay {
  root   html;
  index  index.html index.htm;
  # 匹配history模式，histoty模式必须要配置，hash模式可以不用配置
  #这里有两个坑：$uri/后面没有index.html,后面不会自动添加index.html。
  #vuecay后面有‘/index.html’,等同于“/”，vuecay后面有“/”会自动在“/”后面添加index.html
  try_files $uri $uri/ /vuecay/index.html;
}

  • 两者最大的区别是try_files最后面的vuecay是有带有了“/”。如果vuecay后面没带“/”代表的是资源，vuecay后面带“/”代表的是vuecay目录下的index.html。

  • 丢参数的location的try_files里的

    1. $uri
    2. $uri/
    3. /vuecay

    这三个配置是一样的意思。网上有人说$uri/是为了访问uri对应目录下的资源，但是测试中并不会自动查找index.html，当我手动添加index.html，才会去查找uri目录下的index.html。

    大家可以试试这个location：

    location /vuecay {
  root   html;
  index  index.html index.htm;
  # 匹配history模式，histoty模式必须要配置，hash模式可以不用配置
  # $uri/后面添加index.html
  try_files $uri $uri/index.html /vuecay;
}

    测试结果和$uri/后面没有index.html完全不同。

  • 不丢参数的location的try_files里配置的是 /vuecay/index.html ，等价于/vuecay/，这里后面会自动添加index.html。而$uri/后面却 不会自动添加index.html，很奇怪。

hash模式解决参数丢失

mode: 'hash'

history模式丢参数的location的try_files的配置

location /vuecay {
  root   html;
  index  index.html index.htm;
  # 匹配history模式，histoty模式必须要配置，hash模式可以不用配置
  #这里有两个坑：$uri/后面没有index.html,后面不会自动添加index.html，vuecay后面没有‘/’
  try_files $uri $uri/ /vuecay;
}

访问路径：

http://ip/vuecay/#/path1/path2?name=cay

访问截图：

在这里插入图片描述

nginx访问日志（只展示重点）：

remote_addr:111.196.243.20 – remote_user:- – time_local:[25/Jul/2022:23:47:32 +0800] – request:“GET /vuecay/ HTTP/1.1” – status:200 – body_bytes_sent:583 – http_referer:“-” – http_user_agent:“Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36” – http_x_forwarded_for:“-” – uri:/vuecay/index.html – args:- – is_args: – request_body:- – query_string:-

  • 从截图可以看出地址栏也未变化，参数未丢失，页面正常显示参数，请求未发生301，也解决了参数丢失。
  • 从nginx访问日志看出，args和is_args还是没有值。这里的request后面的请求路径没有参数，args和is_args没有值我还能理解，但是上面的request后面的请求路径有参数，args和is_args还没有值，真是令人头大。拓展的一级路径里args和is_args都有值，这就很无语，看来还得好好看看，后续明白了会再更新。

history丢参数，hash模式不丢参数的原因

因为nginx默认是支持hash模式的，不像history模式还得额外配置try_files。而且这里的location是出现问题的try_files的配置，所以history模式受影响，hash模式不受影响，即history模式会丢参数，hash模式不丢参数。

想要了解更多的信息nginx配置导致301的信息，可以看一下我写的另一篇文章：nginx配置导致的301和丢参数的问题的关系

拓展：一级路径不丢参数

上面使用的是三级路径（ip后面跟了三层目录/vuecay/path1/path2，我这里暂且称为三级路径）：

http://ip/vuecay/path1/path2?name=cay

通过测试发现二级及以上路径，在vue为history模式并且错误的try_files配置中会丢失参数，但是一级路径却不会丢失参数

vue的模式设置为history：

mode: 'history'

history模式丢参数的location的try_files的配置：

location /vuecay {
  root   html;
  index  index.html index.htm;
  # 匹配history模式，histoty模式必须要配置，hash模式可以不用配置
  #这里有两个坑：$uri/后面没有index.html,后面不会自动添加index.html，vuecay后面没有‘/’
  try_files $uri $uri/ /vuecay;
}

测试的一级路径：

http://ip/vuecay?name=cay

访问截图：

在这里插入图片描述

nginx访问日志：

请求发生301

remote_addr:111.196.243.20 – remote_user:- – time_local:[25/Jul/2022:23:20:27 +0800] – request:“GET /vuecay?name=cay HTTP/1.1” – status:301 – body_bytes_sent:162 – http_referer:“-” – http_user_agent:“Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36” – http_x_forwarded_for:“-” – uri:/vuecay – args:name=cay – is_args:? – request_body:- – query_string:name=cay

重定向后的请求

remote_addr:111.196.243.20 – remote_user:- – time_local:[25/Jul/2022:23:20:27 +0800] – request:“GET /vuecay/?name=cay HTTP/1.1” – status:200 – body_bytes_sent:583 – http_referer:“-” – http_user_agent:“Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36” – http_x_forwarded_for:“-” – uri:/vuecay/index.html – args:name=cay – is_args:? – request_body:- – query_string:name=cay

  • 从截图可以看出来，地址栏发生变化（vuecay多了“/”），参数未丢失，请求会发生301，这是因为vuecay后面没有‘/’，所以发生301。这里和上面的三级路径的测试的最大区别是参数没有丢失。
  • 从nginx的访问日志可以看出，无论在发生301的那次请求中，还是301重定向之后的请求，args和is_args都是有值。

可见一级路径在错误的配置下，发生了301，但是却没有丢失参数，但是如果是二级路径及以上则会丢失参数，感兴趣可以尝试。（具体原因还待深入研究）

测试hash模式：

我主要想看args和is_args是否有值

mode: 'hash'

访问路径：

http://ip/vuecay/#/?name=cay

location的设置：

location /vuecay {
  root   html;
  index  index.html index.htm;
  # 匹配history模式，histoty模式必须要配置，hash模式可以不用配置
  #这里有两个坑：$uri/后面没有index.html,后面不会自动添加index.html，vuecay后面没有‘/’
  try_files $uri $uri/ /vuecay;
}

访问截图：

在这里插入图片描述

nginx访问日志：

remote_addr:111.196.243.20 – remote_user:- – time_local:[26/Jul/2022:00:03:06 +0800] – request:“GET /vuecay/ HTTP/1.1” – status:200 – body_bytes_sent:583 – http_referer:“-” – http_user_agent:“Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36” – http_x_forwarded_for:“-” – uri:/vuecay/index.html – args:- – is_args: – request_body:- – query_string:-

  • 从截图可以看出地址栏正常，参数未丢失，内容正常显示参数，未发生301重定向
  • 从nginx日志来看，args和is_args没有值。和上面三级路径的hash模式一样都没有值。

综上，我感觉args和is_args不能作为参数丢失的依据，和我最初的设想不一样。。。

小结

  • try_files的错误配置会导致history模式下的请求的参数丢失，将try_files修改正确即可不丢失参数。
  • hash模式不需要额外配置try_files，所以不会丢失参数。
  • nginx配置的时候注意“/”，有“/” （目录下的资源，一般是index.html）和 无“/” （资源）是两种含义。
  • try_files中的$uri/ 虽然带有“/”，但是后面默认不带index.html，所以最好自己添加index.html。
  • 一级路径在vue是history模式，try_files配置有问题的情况下，不会丢失参数。
  • 我感觉args和is_args不能作为参数丢失的依据（疑惑待解决）。

高亮的两条总结，是这次history请求丢参数的主要误区，大家一定要注意。如果大家测试的结果和我不同，欢迎一起讨论。

想要了解更多的信息nginx配置导致301的信息，可以看一下我写的另一篇文章：nginx配置导致的301和丢参数的问题的关系

附录：nginx的日期格式

log_format main 'remote_addr:$remote_addr -- remote_user:$remote_user -- time_local:[$time_local] -- request:"$request" '
'-- status:$status -- body_bytes_sent:$body_bytes_sent -- http_referer:"$http_referer" '
'-- http_user_agent:"$http_user_agent" -- http_x_forwarded_for:"$http_x_forwarded_for" -- uri:$uri -- args:$args '
'-- is_args:$is_args -- request_body:$request_body -- query_string:$query_string';

附录：vue代码

我们构建简单的vue项目，使用路由，vue的相关代码如下。

Route.js

import VueRouter from "vue-router"
import HelloWorld1 from "./components/HelloWorld1"
import HelloWorld2 from "./components/HelloWorld2"
import HomeTest from "./components/HomeTest"

export default new VueRouter({
    mode: 'hash',
    base: '/vuecay/',
    deep: true,
    routes: [{
            //一级目录需要添加‘/’
            path: '/',
            component: HomeTest,
            //redirect: "/path1/path2",
            children: [{
                    path: 'path1',
                    component: HelloWorld1,
                    children: [{
                            //二级目录不需要加‘/’
                            path: 'path2',
                            component: HelloWorld2
                        }
                    ]
                }
            ]
        }
    ]
})

Vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: '/vuecay/'
})

Main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router"
import router from '@/router'

Vue.config.productionTip = false
Vue.use(VueRouter)

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
//import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
}
</script>

<style>

</style>

HomeTest.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
//import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
}
</script>

<style>

</style>

HelloWorld1.vue

<template>
  <div>
    welcome to path1,{{name}},访问的路径的参数：{{argName}}
    <div>
      <router-view/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld1',
  data(){
    return {
      name: 'cay',
      argName: ''
    }
  },
  props: {
    msg: String
  },
  created () {
    console.log('path1:' + window.location.href)
    console.log('path1:' + this.$route.query.name)
    console.log(this.$route)
    console.log(this.$router)
    this.argName = this.$route.query.name
  }
}
</script>

<style scoped>

</style>

HelloWorld2.vue

<template>
  <div>
    welcome to path2,{{name}},访问的路径的参数：{{argName}}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld2',
  data(){
    return {
      name: 'lucy',
      argName: ''
    }
  },
  props: {
    msg: String
  },
  created () {
    console.log('path2:' + window.location.href)
    console.log('path2:' + this.$route.query.name)
    console.log(this.$route)
    console.log(this.$router)
    this.argName = this.$route.query.name
    //const x = { a: 8 };
    //console.log(JSON.stringify(x))
  }
}
</script>

<style scoped>

</style>

执行命令

npm run build

将编译后的文件部署到服务器上。部署的时候惨过一些坑后面会总结贴上链接。上面的步骤已经是排除坑之后的步骤了。

凯先生boy
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目History模式404问题解决方法
10-17
本文主要解决Vue项目使用History模式发布到服务器Nginx上刷新页面404问题。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Nginx设置日志打印post请求参数的方法
01-09
【前言】  我们项目的短信功能是接第三方，原来对接第三方给...【Nginx设置打印post请求参数】  一、Nginx配置文件（nginx.conf）设置打印post请求参数：在http模块的log_format中增加 “dm”:$request_body 防止中
在nginx上部署vue项目(history模式)的方法
08-28
vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。这篇文章主要介绍了在nginx上部署vue项目(history模式),需要的朋友可以参考下
针对Vue路由history模式下Nginx后台配置操作
01-18
前端将vue路由模式改为history模式后需要运维配置才能正常访问，配置信如下 location / { root html; index index.html index.htm; try_files $uri $uri/ @rewrites; } location @rewrites { rewrite ^(.+)$ /index.html last; } 经测试，可以正常访问 补充知识：Vue History 模式下 整合Nginx部署踩坑过程 在公司部署Vue项目期间，因Vue的Router下的Hash模式的#号太过于难看，就去把模式改为了history模式
vue项目部署到服务器上，使用history路由模式引起二级路由页面丢失的问题解决方法
weixin_49210760的博客
05-21 3344
路由配置 第一次可以出现，再划线就丢失 1.首先如果想要在前端使用hisroty模式的时候需要后端的配置 后盾配置一般固定 下面是我们后端的配置，仅供参考 其中有关history刷新丢失的问题,在于划线的try file 再看前端设置 1.切换路由模式，这个省略 2.需要在vue.config.js中配置publicPath 如图所示 如果想要在开发和生产的时候都用history模式就按照上面的判断环境变量设置 这里注意 在开发的时候，如果你的项目没有做特殊的处理那么想要使用history就的设.
vue打包之后的项目在nginx的部署404,以及无法跳转路由问题
qq_39330397的博客
06-29 6002
常见的使用场景是在单页应用程序（SPA）中，将所有请求都指向主页（如 index.html），然后由前端路由进行处理。这个配置将 /redirect-me 路径的请求重定向到 http://example.com/new-location，并使用 permanent 参数表示永久重定向。你需要将 /path/to/your/static/files 替换为实际的静态文件路径。这个配置将把所有 /old-path/ 开头的请求重写到 /new-path/，并将原始路径中的内容保留。# 指定静态文件的根目录。
Nginx 部署 vue项目 （history模式）
yorcentroll的博客
04-09 3305
大家都知道，vue router有两种模式： 1，hash模式 hash模式应该是平时大家用的最多的一种模式，它的标志是路由地址都会加上#。 2，history模式 history模式则不会加上#号，这样url看起来比较干净。但是使用history模式，会导致一个问题，就是在某个路由页面上刷新的时候或者直接访问多级路由url的时候会报404. import Vue from 'vue'...
在nginx上部署vue项目(history模式)；
zhoumeina99的博客
09-28 2336
route history模式为什么要重定向页面
Vue路由模式为history的项目部署到Nginx
jialiu111111的博客
04-12 1793
因为我们一般都是打包以后放在静态资源服务器中的，我们访问诸如 example.com/rootpath/ 这种形式的资源没问题，是因为，index.html 文件是真实的存在于 rootpath 文件夹中的，可以找到的，返回给前端的。再者，如果我们需要 js 文件，比如登陆的时候请求的地址是 example.com/rootpath/login/js/dist.js 其实我们想要的文件，还是 rootpath/js/ 目录中的 dist.js 文件而已。你如果之前有类似的经历，那么你肯定上网找过解决方案。
vue3 history模式配置及nginx服务器配置
持续学习中
04-11 9689
vue3开始默认新建的项目都是history模式，不过history模式打包后想要使用正常访问的话，需要后端服务器进行配置才可以，否则可能会出现刷新后404的问题。这样，我们通过访问https://abc.xxx.com/calculator/或者https://abc.xxx.com/calculator/wap/这个路径就可以正常使用了，刷新也不会出现404问题。以上例子中vite.config.js的配置，打包后访问的路径为https://xxx.com/calculator/。
Vue History模式的Nginx配置
宁静致远
11-21 2331
vue history模式下的Nginx配置说明
Nginx 反向代理post请求参数为空Setting params NONE问题解决
03-17 2268
一、问题描述 应用前端发送post请求，系统后台没有任何返回。（get请求可以） 框架为struts2+spring，请求方式ajax post。 日志提示： [DEBUG][front][2019-01-24 16:46:00]Setting params NONE[com.opensymphony.xwork2.interceptor.ParametersInterceptor:76]； [DEBUG][front][2019-01-24 16:46:00]No result returned
Vue路由params、query参数丢失解决
见贤思齐焉，见不贤内自省
03-03 4627
在vue中路由传参有两种形式：1.params；2.query 解决办法：sessionStorage或者localStorage 两者的区别：localStorage是永久保存不清除一直存在,sessionStorage关闭客户端即清除 首先有两个页面，通俗点页面一和页面二； 页面一给页面二传递路由参数 params参数 this.id = 666 this.$router.push({ name: '页面二', params: {
vue router 路由跳转获取不到参数
qq_45991812的博客
08-31 1975
混淆 query 和 params 的使用方法, 在使用 params 传参时错误的使用了 path。query 传参是使用 path 来引入，会将传递的参数显示在 url 后，像是带参的 get 请求。使用 query 页面刷新时不会清空传入的数据， params 则会清空。params 传参使用 name 引入，会隐藏参数，像是 post。路由传参一直不能获取到参数, 未出现报错。使用name要对应params。使用path要对应query。
【问题】SpringBoot之GET请求参数偶发性丢失问题
求索
09-11 4673
分析一个由于在线程中引用了request对象而导致http请求参数偶发性丢失的问题
在nginx上部署vue2/vue3项目(history模式)
qq_41231694的博客
03-27 6267
1、vue项目路由history模式配置(vue2和vue3整个配置就这一步不一样) vue2配置 const router = new Router({ mode: 'history', // 访问路径不带井号 需要使用 history模式 base: '/bank/page', // 基础路径 routes: [ { path: '/count', name: 'count', component: resolve => require(
nginx配置vue(history模式)
m0_37634363的博客
03-12 1440
问题的原因：项目本来使用 hash 的路由模式来部署，因为需要关系，现在要改成 history 的模式来部署了（路径上不要有 # 号） 第一步： 修改项目的 router/index.js 的配置 const router = new VueRouter({ mode: 'history', // 将 hash 改成 history routes: [ ...pages ] }) 修改 config/index.js assetsPublicPath assetsPublicPat
Nginx部署vue项目history的路由模式（非根目录）
qq_28016751的博客
12-16 3750
vue的路由分为两种hash和history，hash路由虽然不需要做太多的配置但是url地址上会有一个很丑的#号。 而history模式的路由不会有这个#号但是带来的问题却是刷新页面之后会404找不到页面，原因是spa单页面是通过js来进行跳转的。浏览器根据路由地址是找不到服务器上相关的文件的，所以这里需要进行相应的服务器配置。 这里我选用的是nginx服务器。 VUE项目(我的vue-cli版本4.x) 1. vue.config.js 2. router.js 3. nginx配置..
HOW - Canvas 入门系列之基于vue-konva的多维表格（四）
最新发布
weixin_58540586的博客
05-17 1186
今天我们将将基于vue-konva 实现的一个表格渲染的组件。
vue3获取query参数
09-20
Vue 3 可以通过使用`$route`对象来获取查询参数。 在Vue 3中，`$route`对象提供了很多有用的信息，包括当前路由的路径、参数和查询参数等。其中，查询参数可以通过`$route.query`来访问。 例如，如果当前路由是`/example?foo=bar&baz=qux`，我们可以通过以下代码来获取查询参数： ```javascript export default { mounted() { // 获取所有查询参数 console.log(this.$route.query); // 输出：{ foo: 'bar', baz: 'qux' } // 获取特定的查询参数 console.log(this.$route.query.foo); // 输出：'bar' console.log(this.$route.query.baz); // 输出：'qux' } } ``` 在上面的代码中，`this.$route.query` 返回一个包含所有查询参数的对象，我们可以通过对象的属性来访问特定的查询参数。 对于带有多个相同名称的查询参数，`this.$route.query` 返回一个数组。例如，如果路由是`/example?foo=bar&foo=baz`，那么`this.$route.query.foo`将返回一个包含`['bar', 'baz']`的数组。 需要注意的是，如果没有查询参数，`this.$route.query` 将返回一个空对象`{}`。因此，在处理查询参数之前，我们需要对其进行有效性检查。 以上就是在Vue 3中获取查询参数的方法。希望能对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值