Vue路由跳转

一、

<router-link tag="a" :to="{name:'测试页',params:{id:1} } }">点击跳转(name)
</router-link>

this.id = this.$route.params.id;

二、

<router-link tag="a" :to="{path:'./test',query:{id:1} } }">点击跳转(path)
</router-link>

this.id = this.$route.query.id;

三、

html:
    <div @click="clickTo"></div>
js:
    this.$router.push({
        name:'测试页',
        params:{
            id:1
        }
    })
	
this.id = this.$route.params.id;

#四、

html:
    <div @click="clickTo"></div>
js:
    this.$router.push({
        path:'./test',
        query:{
            id:1
        }
    })
    
this.id = this.$route.query.id;

总结

• 第一、二种，是通过标签跳转，第三、四种是通过事件跳转页面
• 第一、三种，是通过name命名路由的方式跳转传参，跳转后页面刷新，参数会丢失（需要传参跳转的时候，不建议使用）；
• 第二、四中，是通过path路由跳转，跳转后页面刷新，参数不会丢失，跟平时写的路径后携带参数类：/test?id=1（推荐使用）;