路由带参,简简单单~
带参数的路由匹配
本文正在参加「金石计划 . 瓜分6万现金大奖」
带参数的路由匹配,其需求主要是:当需求将给定匹配方法的路由映射到同一个
组件,可是其所需数据的方针用户不同如ID不同,页面参数不同等等时。在 Vue Router 中,我们能够在途径中运用一个动态字段来实现,也便是传入途径参数
一、query传递/接纳途径参数
1、两种方法
(1)方法一
router.push({
name: 途径别号(如home,about,login),
query: {
//途径参数的key:途径参数的value,能够传递一个或许多个
username: 'catt',
gender:'male'
}
})
(2)方法二
router.push({
path: 途径(如/home,/about,/login),
query: {
//途径参数的key:途径参数的value,能够传递一个或许多个
username: 'catt',
sex:'female'
}
})
运用path+query和运用name+query的差异在于:经过name方法跳转的页面在改写之后,参数会失效,而path方法参数不会失效,会被保存。
2、router-link
<router-link to="https://juejin.im/post/7165525662269194248/xxx"></router-link>
标签将会呈现一个带有正确 href
特点的 <a href="https://juejin.im/post/7165525662269194248/xxx"></a>
标签。router-link跳转的途径能够不需求在路由处装备。运用router-link组件进行导航,经过to特点来履行链接,还需求一个路由出口,即router-view,路由匹配到的组件都将渲染在这里。
3、router.push()
编程式导航,即router.push(location,onComplete?,onAbort?),这个方法会向history栈增加一个新的记录,这样的话就会呈现回退按钮,能够返回到来时的途径。在vue3中,没有this,所以不能运用this.$route.params,可是能够经过引进useRouter,useRoute来运用,其中,
router是路由操作目标,只写目标,以及跳转参数;route是路由信息目标,只读目标,接纳传递的途径参数
其实,router不仅仅只要push方法,还有router.go(),router.replace()。 举例如下:
(1)传递参数
//home页面
<button @click="toAbout">Go to AboutView</button>
<script setup lang="ts">
import {
useRouter
} from 'vue-router';
const router = useRouter()
const toAbout = () => {
router.push({
name: 'about',
query: {
username: 'catt'
}
})
}
</script>
(2)接纳参数
//about页面
<script setup lang="ts">
import {
useRoute
} from 'vue-router';
import {
onMounted
} from 'vue';
const route = useRoute()
onMounted(() => {
console.log(route.query);
})
</script>
经过query传递参数,参数一般是以’?’方法拼接在途径后边,假如参数有多个,则参数与参数之间经过’&’进行拼接。完好途径为:xxxxxxxxxx/about.username?username=catt
传递一个途径参数,如图所示:
传递多个途径参数时。如图所示:
二、params传递/接纳途径参数
假如提供了path,patams会被疏忽。所以,经过params传递参数,只要一种方法
router.push({
name: 途径别号(如home,about,login),
params: {
//途径参数的key:途径参数的value,能够传递一个或许多个
username: 'catt',
gender:'male'
}
})
其中,路由装备path:"/about/:username"
或许path:"/about.username"
在路由中不装备path
中的参数username
第一次可请求,改写页面username
会消失
在路由中装备path
中的参数username
改写页面username
会保存
1、router-link
router-link中链接假如是’/’开端,便是从根路由开端,即在路由装备的path;假如开端不带’/’,则代表的是从当时路由开端,也便是当时路由的子路由,路由的子路由装备中path也不需求’/’。
举个简略例子: 当时页面地点路由为 /app/home,在设置router-link链接的时分,
{path:’about’} 跳转后页面地点路由为 /home/about,装备在某个路由的子路由里
{path:’/about’} 跳转后页面地点路由为 /about
2、router.push()
(1)传递参数
//home页面
<script setup lang="ts">
import {
useRouter
} from 'vue-router';
const router = useRouter()
const toAbout = () => {
router.push({
name: 'about',
params: {
username: 'dogg'
}
})
}
</script>
(2)接纳参数
<script setup lang="ts">
import {
useRoute
} from 'vue-router';
import {
onMounted
} from 'vue';
const route = useRoute()
onMounted(() => {
console.log(route.params);
})
</script>
(3)需求路由合作,显现参数
{
path: '/about/:username',
name: 'about',
component: () => import('../views/AboutView.vue')
}
经过params传递参数,假如需求在途径显现参数,则需求路由合作,即把params也当做是路由的参数;不然,不会再途径中显现。完好途径:xxxxxxxxxxxxxxx/about/dogg
传递一个参数时,如图所示:
感兴趣的友友,能够自行测验params不合作路由运用,以及path+params会呈现什么成果。
三、总结
query和params传参的差异:
(1)query
运用name+query或许path+query传递途径参数,能够用path或许name两种方法来引进路由。 query是拼接在url后边的参数,没有传参也能够正常显现页面,query相当于get请求,页面跳转的时分,能够在地址栏看到请求参数,
(2)params
运用name+params传递途径参数,只能用name来引进路由,假如写成了path,或疏忽params传递的参数,那么接纳参数的页面的成果将会是undefined。 params传参跳转后,接纳的参数不显现在路由上,假如改写页面,参数会消失;可是假如想改写保存参数,能够经过合作路由运用,将params当成路由的一部分,在路由后边直接增加参数名。params相当于post请求,参数不会在地址栏中显现,只要params和路由结合运用才能够在地址栏看到传递参数。