vue-获取路由携带参数

一般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>