vue3路由跳转方法

  首先，vue3.0跳转和vue2.0跳转方式差别不大，但是还有需要注意的地方。这里我介绍两种比较常见的路由跳转方法。

1.利用router-link标签来进行跳转。

<template>
<div>
    <router-link to="/index">22</router-link>
    <router-link to="/">11</router-link>
    <router-link to="/father">33</router-link>
    <router-link to="/teleport">44</router-link>
</div>
</template>

to 是你要跳转的路径，也就是接口。这个是最简单的。

如果你要传入参数的话，就得绑定属性。

<template>
<div>
    <router-link :to="{name:'/index',params:'我的'}">22</router-link>
    <router-link :to="{name:'/',params:'我的'}">11</router-link>
    <router-link :to="{name:'/father',params:'我的'}">33</router-link>
    <router-link :to="{name:'//teleport',params:'我的'}">44</router-link>
</div>
</template>

这里判定to,然后采用name来跳转到指定页面。name值是你在路由配置中的name属性。

2.点击事件进行路由的跳转

html代码

<template>
<div>
    <p @click="jump(1)">1111</p>
    <p @click="jump(2)">2222</p>
    <p @click="jump(3)">3333</p>
</div>
</template>

绑定点击事件的时候传入参数，进行判断跳转到哪个页面。

js代码

<script>
import {useRouter} from 'vue-router'
export default{
    name:"liveView",
    setup(){
        const router=useRouter()
        const jump=(e)=>{
            console.log(e)
            let result=e==1 ? "/index":e==2 ? "/father":"/teleport"
            router.push(result)
        }
        return {
            jump
        }
    }
}
</script>

vue3.0要注意，setup组件是在初始化之前执行，所以this还不是实例对象。我们不能像2.0一样用this.router.push。vue3.0的处理方法就是，从vue-router中引入useRouter。利用useRouter来进行路由的跳转。