脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3获取地址栏参数

Vue3获取地址栏参数方法详解

 更新时间：2023年04月24日 11:54:10   作者：顽石九变  
Vue3 获取地址栏参数有两个方式：查询参数和路径参数。Vue3获取地址栏参数是从路由router中获取，查询参数和路径参数获取方式不一样。感兴趣的同学可以参考阅读

Vue3 获取地址栏参数有两个方式：查询参数和路径参数。

Vue3获取地址栏参数是从路由router中获取，查询参数和路径参数获取方式不一样。

一、查询参数

比如地址 http://127.0.0.1:5173/?code=123123，
我们要获取code参数可以路由router获取，注意是route.query

首先需要在router/index.js中定义好路由

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('../views/home.vue')
    },
  ]
})

export default router

然后就可以在组件中通过useRouter获取query参数了

<script setup>
import {useRouter} from 'vue-router'

const { currentRoute } = useRouter();
const route = currentRoute.value;

onMounted(()=>{
  let code=route.query.code
  console.log('code', code)
})

</script>

二、路径参数

路径参数指的是参数是拼接在地址栏中的。
比如地址 http://127.0.0.1:5173/123123
最后的123123就是参数。

这种参数首先要定义要路由，在路由中对参数进行命名，下面代码中:code就是命名一个路径参数code

首先需要在router/index.js中定义好路由以及路径参数

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/:code',
      name: 'home',
      component: () => import('../views/home.vue')
    },
  ]
})

export default router

接着就可以在home.vue组件中通过路由useRouter得到参数，注意是route.params

<script setup>
import {useRouter} from 'vue-router'

const { currentRoute } = useRouter();
const route = currentRoute.value;

onMounted(()=>{
  let code=route.params.code
  console.log('code', code)
})

</script>

三、注意点

入口页面App.vue必须定义好router-view标签，不能图简单将上面定义的home组件直接引入到App.vue中，如果直接引入走的就不是路由了，因而通过useRouter也无法获取到路由参数了

如下错误示例：

<template>
  <div id="app">
    <home></home>
  </div>

</template>

<script setup>
import home from './views/home.vue';
</script>

正确应该是使用router-view标签

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

</script>

到此这篇关于Vue3获取地址栏参数方法详解的文章就介绍到这了,更多相关Vue3获取地址栏参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vuex的使用和简易实现

    vuex的使用和简易实现

    这篇文章主要介绍了vuex的使用和简易实现，帮助大家更好的理解和使用vuex，感兴趣的朋友可以了解下
    2021-01-01
  • vue实现的封装全局filter并统一管理操作示例

    vue实现的封装全局filter并统一管理操作示例

    这篇文章主要介绍了vue实现的封装全局filter并统一管理操作,结合实例形式详细分析了vue封装全局filter及相关使用技巧,需要的朋友可以参考下
    2020-02-02
  • VUE使用vuex解决模块间传值问题的方法

    VUE使用vuex解决模块间传值问题的方法

    本篇文章主要介绍了VUE使用vuex解决模块间传值问题 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue 图标选择器的实例代码

    vue 图标选择器的实例代码

    本文通过实例代码给大家介绍了vue 图标选择器的相关知识，图文实例代码相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
    2021-11-11
  • Vue渲染流程步骤详解

    Vue渲染流程步骤详解

    在Vue里渲染一块内容，会有四个流程步骤，那么该怎么理解这个流程呢，所以本文就给大家详细讲解一下Vue 渲染流程，文中有纤细的代码示例供大家参考,需要的朋友可以参考下
    2023-07-07
  • 解析vue.js中常用v-指令

    解析vue.js中常用v-指令

    本文以click为例给大家介绍vue.js中常用v-指令，可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript代码，本文通过示例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧
    2021-10-10
  • electron中使用本地数据库的方法详解

    electron中使用本地数据库的方法详解

    众所周知,electron是可以开发桌面端的框架,那我们有一些数据不想让别人看到,只能在自己的电脑上展示时怎么办呢,这个时候就可以用到本地数据库,本文将以sqlite3为例介绍一下electron如何使用本地数据库
    2023-10-10
  • vue中使用ueditor富文本编辑器

    vue中使用ueditor富文本编辑器

    这篇文章主要介绍了vue中使用ueditor富文本编辑器的相关资料,需要的朋友可以参考下
    2018-02-02
  • Vue使用axios图片上传遇到的问题

    Vue使用axios图片上传遇到的问题

    后端写个上传图片的接口可不是很简单，只需要让这个字段限制为图片格式，后台做个保存的逻辑就完事了，前端处理还要牵扯到请求头，数据格式的处理等等问题，按照老传统把图片按照字符串往接口put发现返回的全是400错误，直到我知道了前端的FormData方法！
    2021-05-05
  • Vue屏幕自适应三种实现方法详解

    Vue屏幕自适应三种实现方法详解

    在实际业务中，我们常用图表来做数据统计，数据展示，数据可视化等比较直观的方式来达到一目了然的数据查看，但在大屏开发过程中，常会因为适配不同屏幕而感到困扰，下面我们来解决一下这个不算难题的难题
    2022-11-11

最新评论