router路由跳转的两种模板

<router-link><router-link/>
<router-view><router-view/>

link  ：链接，联系

view：指看见展现在人们面前的、可以稳定地进行详细审视的事物

将语境拉回到router里，抽象概括一下

router-link就是一个强化版的a标签与button标签的结合，用来跳转

router-view就是一个加强版的div标签，用来呈现

这个是router-view的

那么link呢？

我说了，他就是一个强化版的a标签，a标签怎么用，link标签就怎么用

a标签不是要有href属性才能跳到指导位置吗，link标签呢？

当然，link标签有一个to映射，我们使用to对应配置文件中的path属性中的值，即可

router-link to = ""，这个和 a href = ""，是不是完全一样

注意，router-view，是用来显示配置文件的

第一套模板就这样出现了

    <router-link to="/home"></router-link>
    <router-view>选择画布一样选择位置<router-view/>

第二套模板,直接调用push方法

<template>
  <div>
    <button @click="navigateToHome">跳转到首页</button>
  </div>
</template>

<script setup>
const navigateToHome = () => {
  // 使用路由的 push 方法导航到 /home 路由
  this.$router.push('/home');
};
</script>

如果失败了，你需要将router带入全局组件中