首页 > 其他分享 >Vue3使用vue-router如何实现路由跳转与参数获取

Vue3使用vue-router如何实现路由跳转与参数获取

时间:2023-02-14 16:56:46浏览次数:36  
标签:vue const useRoute 跳转 Vue3 router id

//跳转传参
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()

//新开页
function jump(id){
  const url = router.resolve({
    path:"/detail",
    query:{
      id:id
    }
  })
  window.open(url.herf)
}

//当前页
function jump(id){
  router.push({
    path:"/detail",
    query:{
      id:id
    }
  })
}

 

取出路由的值

第一步先引入import {useRoute} from 'vue-router';
第二步 const route = useRoute();
第三步route.query.id

 

标签:vue,const,useRoute,跳转,Vue3,router,id
From: https://www.cnblogs.com/tanchangsha/p/17120075.html

相关文章

  • vue实现自定义多选按钮
    html部分<div:class=""getSxxClass(item)v-for="(item,index)indata.sxxList":key="index"@click="sxxchangeQuery(item)"></div>js部分constdata=reactive......
  • Vue keep-alive缓存路由信息
    在不使用keep-alive时,通过路由跳转到另一组件上时,上一个组件会被vue销毁,在次进入,页面会保持初始状态,不会对用户的更改保留,如果需要包作在某组件上的更改,就可以使用keep-aliv......
  • vue路由的使用,命名,参数,范式,嵌套,动态匹配
    基本使用:1,让Vue使用该VueRouter创建,Vue.use(VueRouter);2,创建router对象varrouter=newVueRouter({});3,在创建的router对象中配置路由对象,路由匹配的规则,var......
  • Vue 组件传值方法5,利用$parent和$Children
    实现思想:利用每个组件的属性来传值,即每个组件都有Children等属性,根据这些属性找到要找的组件,对其进行操作,比如Vue实例vm的父级没有,子组件在这里有App和App下的Son,这些都是......
  • Vue组件传值方法4利用provide和inject
    父组件中设置provide可以设置多个属性,在它的子组件中设置inject接收父组件:provide:{for:'AppPassValue',}子组件:data(){return{......
  • drf的总结与前端vue框架了解
    drf的总结与前端vue框架了解一、drf知识点整合1、drf入门及规范#1drf入门规范-前后端分离模式-前后端混合-postman-restful规范-drf:django......
  • 高德地图手动实现轨迹,vue
    预览效果1、高德地图的官网使用的是web端,jsapi;https://lbs.amap.com/api/jsapi-v2/summary2、准备https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare注册账号—......
  • vuecli实现仿写饿了么
    ​​点击github获取代码​​仿写饿了么是一个不错的用来锻炼vue的方式,我仿写的饿了么还是比较浅显的,没有使用饿了么提供的api,数据就是自己手写的几条json用json-server打开,......
  • 1 drf回顾 、2 前端发展历史、 3 vue介绍
    目录1drf回顾2前端发展历史3vue介绍1drf回顾#1drf入门规范 -前后端分离模式-前后端混合-postman-restful规范-drf:django的app#2序列化类......
  • Vue项目在ie浏览器中显示空白的兼容性问题解决
    问题:在ie浏览器中页面报错:SCRIPT5022:SecurityError小编也不知道原因是什么,小编是尝试了以下几种方式才显示出来,这里建议大家试试看。1、下载软件包:@babel/polyfill执......