vue声明式跳转/函数式跳转(传参)

声明式跳转+传参

<router-link to="/father">声明式跳转</router-link>

//声名式query传参
<router-link :to='{path:"/father/son",query:{courseId:103}}'>路由嵌套</router-link> 

//声明式params传参 name与声明routes中name一致,且params传参时浏览器url必须加入参数才能正常显示
<router-link :to='{name:"Son",params:{courseId:105,courseTitle:"从入门到如土"}}'>跳转son</router-link>

函数式跳转+传参

<template>
    <div>
        son
        <!-- 点击事件-->
        <button @click="toFather">跳转到father</button>
    </div>
</template>

<script>
    export default {
        name: "Son",
        methods: {
            //点击事件
            toFather() {
                //this.$router.push('/father')
                //函数式query传参
                // this.$router.push({path:"/home",query:{courseId:200,title:300}})
                //函数式params传参
                this.$router.push({ name: "Home", params: { courseId: 200, title: 300 } })
            }
        }
    }
</script>

 this.$router.on()打开指定页面

this.$router.back()返回

this.$router.replace()替换到当前页面

posted @ 2021-09-23 21:07  从入门到入土  阅读(285)  评论(0编辑  收藏  举报