Vue路由传参详解(params 与 query)

前言:

路由传参分为 params 传参与 query 传参

params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显示在地址栏中(但是不能刷新)。params 只能配合 name 使用,如果提供了 path,params 会失效。

如果用到了动态路由:‘/user/:id’,那么params就不会类似于post请求,传递过去的就是params参数,会拼接显示在地址栏中,比如:/user/13。

query 传参类似于网络请求中的 get 请求,query 传过去的参数会拼接在地址栏中(?name=xx)。query 较为灵活既可以配合 path 使用,也能配合 name 使用(亲测可用)。

name是什么呢?name 是配置路由时给 path 取的别名,方便使用。但要注意的是 “地址栏显示的路径始终是 path 的值

const routes = [
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home',
    name: 'home',
    component: Home
  }
]

name 最重要的一点就是配合 params 进行路由的参数传递。我们来看一个列子:当我们登录之后我们需要把用户名带到主页进行展示。当然方法有许多比如localStorage,sessionStorag,中央事件总线bus,但我们这里需要学习路由传参。

  • 方式一:通过 params 传参

    • 编程式:

      • data:{
          username: ''
        },
        login() {
          ...
          this.$router.push({
            name: 'home', //注意使用 params 时一定不能使用 path
            params: { username: this.username },
          })
        }
        
    • 声明式:

      • <router-link :to="{ name: 'home', params: { username: username } }">
        
    • 取值:this.$route.params.username

  • 方式二:通过 query 传参

    • 编程式:

      • data:{
          username: ''
        },
        login() {
          ...
          this.$router.push({
            path: '/home',
            query: { username: this.username },
          })
        }
        
    • 声明式:

      • <router-link :to="{ path: '/home', query: { username: username } }">
        
    • 取值:this.$route.query.username

params 传参后,刷新页面会失去拿到的参数。所以路由参数要修改为 '/login/:username'(官方称为动态路由)

const routes = [
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home/:username',
    name: 'home',
    component: Home
  }

但是这样就不会类似于 post 请求,他会把接收到的参数替换作为地址。

假如传入参数为:params: { username: ‘admin’},那么最终访问的地址为:http://localhost:8080/home/admin

总结

  • 通过登录的例子来看,如果用户名不是敏感信息,可以直接放在地址栏中(使用query参数)
  • 为什么不用params传参?由于 params 传参不能刷新。或满足刷新需求,但要对地址进行修改,用户名一样会显示在地址栏中
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐