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来进行路由的跳转。
