无法使用 Vue-Router 获取 URL 中的参数

Lime
  • 16

今天尝试使用Vue-Router(在Vue-CLI中)获取URL参数时遇到了困难($route.query为空),代码如下。

代码用途:获取URL后携带的参数(如“http://localhost:8080/#/?clie...”中的client_id)

项目文件结构:enter image description here

router/index.js:enter image description here

App.vue(获取 URL 参数的部分代码):enter image description here

这部分代码的运行结果:enter image description here

回复
阅读 652
2 个回答
✓ 已被采纳

vue-routermounted 触发时暂未完成对 url 的处理,只能取得基础的 path。

解决方案 1:
利用万能的 setTimeout,只需等待 1ms ,让 vue 处理完,router 即可获取到数据。

App.vue

mounted() {
    setTimeout(() => {
        console.log(this.$route.query)
    }, 1)
}

解决方案 2:
利用 Vuex 待 router 正确载入时通知 / 放行对应事件执行。

src/router/index.js

import VueRouter from 'vue-router'
//=> 配置路由
const router = new VueRouter({  routes: [  {  path: '/',  name: 'main',  component: () => import('../views/index/index.vue')  }

// ↓ 解决方案 ↓
router.afterEach((to, from) => {
    router.app.$store.commit( 'global/routerReady', true )
})

App.vue

import { mapGetters } from 'vuex'

export default {
    // ...
    watch: {
       routerReady() {
           console.log('此时,Router 已载入完成。')
           console.log(this.$route.query)
       }
    },
    computed: {
        ...mapGetters('global', ['routerReady'])
    }
}

router/index.js:

const routers = [
  {path:'/', component: Login},
  {path:'/:client_id', component: Login},
]

浏览器访问:http://localhost:8080/123456

获取参数:

let client_id = this.$route.params.client_id
console.log(client_id ) // 结果:123456
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏