一般vue项目跳转路由时,往往跳转时会携带一些参数。那么在新的页面如何获取该参数?
只需要在新页面中的computed里面这么写即可:
<script>
export default{
name:'demo',
computed:{
id(){
return this.$route.query.id
}
}
}
</script>
获取参数有了,那么顺便写一下如何传参
首先是router-link的跳转,不带参数的话不写params项即可
<template>
<div>
<router-link :to="{path:'/demo',params:{id:1}}"></router-link>
</div>
</template>
接着是使用this.$router.push跳转
<script>
export default{
name:'toDemo',
data(){
return{
id:'1'
}
}
methods:{
toDemo(){
this.$router.push('/demo')//不带参数
this.$router.push('/demo?id='+id)//直接在路径上写
this.$router.push({path:'/demo',query:{id:'1'}})//带参数
this.$router.push({name:'demo',query:{id:'1'}})//带参数
}
}
}
</script>