一、路由跳转

分为声明式和编程式两种方式：

• 声明式：该方式是通过router-link组件的to属性实现。
• 编程式：定义事件，通过router.push()方法跳转。

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

<template>
    <div>
        <-- to是你要跳转的路径 -->
        <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,然后采用name来跳转到指定页面。name值是你在路由配置中的name属性。

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

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>
//从vue-router中引入useRouter
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"
            //利用useRouter来进行路由的跳转
            router.push(result)
        }
        return {
            jump
        }
    }
}
</script>

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

二、路由传参

路由传参分为query和params两种传参方式：

• query 传参类似于网络请求中的 get 请求，query 传过去的参数会拼接在地址栏中（?name=xx）。query 较为灵活既可以配合 path 使用，也能配合 name 使用。

• params 传参类似于网络请求中的 post 请求，params 传过去的参数不会显示在地址栏中（但是不能刷新）。params 只能配合 name 使用，如果提供了 path，params 会失效。

1、router-link

• query传递参数

<router-link :to="{path:'guest',query:{id:1}}">跳转到路由为guest页面</router-link>

<router-link :to="{name:'guest',query:{id:1}}">跳转到路由为guest页面</router-link>

• query接收参数

<script setup lang="ts">
    import { useRoute } from 'vue-router';
    import { onMounted } from 'vue';
    const route = useRoute();
    onMounted(() => {
        console.log(route.query.id);  //1
    })
</script>

• params传递参数

//路由js文件中需要配置`path:"/home/:id"`或者`path:"/home.id"`
//路由js文件中不配置path中的参数id 第一次可请求,刷新页面id会消失
//路由js文件中配置path中的参数id 刷新页面id会保留
<router-link :to="{name:'guest',params:{id:1}}">跳转到路由为guest页面</router-link>

• params接收参数

<script setup lang="ts">
    import { useRoute } from 'vue-router';
    import { onMounted } from 'vue';
    const route = useRoute();
    onMounted(() => {
        console.log(route.params.id); //1
    })
</script>

2、router.push()

• query传递参数

<template>
    <button @click="clickGo">跳转到路由为guest页面</button>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
const clickGo = () => {
   //通过name跳转传递
   router.push({ name: 'guest', query: { id: 1 } });
   //通过path跳转传递
   router.push({ path: 'guest', query: { id: 1 } });
}
</script>

• query接收参数

<script setup >
    import { useRoute } from 'vue-router';
    import { onMounted } from 'vue';
    const route = useRoute();
    //在组件挂载完成后通过 route.query.属性名 接收参数
    onMounted(() => {
        console.log(route.query.id);  //1
    })
</script>

• params传递参数

router.push({ name: 'guest', params: { id: 1 } });

• params接收参数

<script setup lang="ts">
    import { useRoute } from 'vue-router';
    import { onMounted } from 'vue';
    const route = useRoute();
    //在组件挂载完成后通过 route.params.属性名 接收参数
    onMounted(() => {
        console.log(route.params.id); //1
    })
</script>