路由跳转

在创建完路由后，可以在主界面通过<router-link> 组件设置一个导航链接，通过设置的路由切换不同组件界面，<router-link> 组件的功能与超链接的功能较为相似，进行一个导航跳转，但是该组件相比<a>标签，可以在不重新加载页面的情况下更改 URL

<router-link>控件的常用属性：

属性	描述
to	跳转到目标路由的链接
replace	跳转时调用调用 router.replace() 而不是 router.push()，设置后导航后不会留下history记录
append	在当前 (相对) 路径前添加其路径
active-class	链接激活时使用的 CSS 类名
event	触发导航的事件

在App.vue文件下：

<template>
	<router-link to="/">Go to Home</router-link>
	<router-link to="/CodeAndCesium">Go to CodeAndCesium</router-link>
	<hr />
	<router-view />
</template>

<script setup>
</script>

但是这种通过path方法跳转路由的方法有个问题：如果后续修改了这个地址的path，那么页面中使用过之前的path的地方都要进行手动的修改，不然跳转会报错；针对这种情况，我们可以通过其name进行跳转，如果其path发生改变，还是可以通过name进行跳转，跳转后，其地址栏会自动的变成新设置的path，不需要在模板中批量的修改这些地址

<template>
	<router-link :to="{ name: 'home' }">Go to Home</router-link>
	<router-link :to="{ name: 'codeandcesium' }">Go to CodeAndCesium</router-link>
	<hr />
	<router-view />
</template>

<script setup>
</script>

:to表示动态属性的绑定

---

router-link与传参结合

<template>
	<router-link to="/?id=100&title=详情内容">查询字符串传参</router-link>
	<router-link to="/codeAndCesium/007">路径传参</router-link>
</template>

router-link传参的动态属性绑定

<template>
	<router-link :to="{name: 'home', query:{id:200, title:'vue3'}}">动态查询字符串传参</router-link>
</template>

在vue中，如果使用的是同一个页面，当传递的参数改变，这个组件不会进行重新的刷新（即在同一个页面中，通过传递参数进行路由的切换（地址栏发生变化），页面是不会进行改变的），对于这个问题，我们可以通过watch监听器来进行参数变化的监听，当监听到传递来的参数发生变化时，重新在去向后台去哪一次数据：

import { useRoute } from 'vue-router'
import { watch, ref } from 'vue'
const route = useRoute()
const datas = ref()  // 首先需要将数据变成响应式的数据
watch(route, async () => {
    // 监听传递来的参数发生变化时，重新请求一次数据
    datas.value = await api.find(route.params.id)
})
// 一开始请求一次数据
datas.value = await api.find(route.params.id)