首页 > 编程知识 正文

vue 路由跳转参数,vue路由传参的方式

时间:2023-05-04 09:10:13 阅读:241787 作者:3503

vue传参大致分为路由传参(?拼接传参)和动态路由传参

一、动态路由传参

定义路由

const routes = [ { path: '/first', name:'first', component:()=>import( '../components/first.vue' ) // component:first }, { path: '/second', name:'second', component:()=>import( '../components/second.vue' ) },]

router-link to 以对象形式跳转

<template> <div id="app"> <router-link :to="{name:'first',params:{name:'呆萌的蚂蚁'}}">params</router-link> <router-link :to="{name:'second',query:{name:'李四'}}">query</router-link> <router-view></router-view> </div></template>

(1)params传参

<h1>params对象传参{{$route.params.name}}</h1>

 

 

 

(2)query传参

发现query传参并没有会丢失  注意看地址栏 在一开始跳转的时候 发现就在url地址栏上以?拼接了参数路径,而params跳转时没有,所以说这也是params动态路由传参和query动态路由传参的区别,也是params对象传参为什么会消失的问题。

解决params动态传参刷新后参数丢失问题

因为params动态路由传参时,url地址并没有拼接,但是query会拼接在地址栏上,所以vue提供给我们另一种动态传参的方式,我们只需要在定义路由时在后面拼接/:name,就可以解决刷新后参数会丢失的问题,注意这里不是以?拼接了路径  

{ path: '/first/:name', name:'first', component:()=>import( '../components/first.vue' ) },

 跳转

<router-link to="/first/呆萌的蚂蚁">params</router-link>

当然 还有一种push写法 也是一样的道理 项目中也是用的比较多的

对象跳转

<a @click="$router.push({name:'first',params:{name:'呆萌的蚂蚁'}})">a链接</a>

$router.push 

<a @click="$router.push('/first/呆萌的蚂蚁')">a链接</a> 二、路由传参  ?拼接

只需要在路由的后面利用?的形式 进行参数的拼接

<router-link to="/second?name=呆萌的蚂蚁">?传参</router-link> <a @click="$router.push('/second?name=呆萌的蚂蚁')">a链接</a> 三、后退 <a @click="$router.back()">回退</a> <a @click="$router.go(-1)">回退</a>

go的功能还是比较强大的 正数可以前进  负数可以后退  里面的数字可以决定前进后退的层次

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。