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

  • Z时代
  • 2024-02-25
  • 分类：IT

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

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

项目文件结构：无法使用 Vue-Router 获取 URL 中的参数

router/index.js:无法使用 Vue-Router 获取 URL 中的参数

App.vue(获取 URL 参数的部分代码):无法使用 Vue-Router 获取 URL 中的参数

这部分代码的运行结果：无法使用 Vue-Router 获取 URL 中的参数

回答：

router" title="vue-router">vue-router 在 mounted 触发时暂未完成对 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

以上是 无法使用 Vue-Router 获取 URL 中的参数 的全部内容， 来源链接： utcz.com/p/935771.html

回到顶部