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的功能还是比较强大的 正数可以前进 负数可以后退 里面的数字可以决定前进后退的层次