vue3的页面跳转方法汇总(路由跳转，组件跳转)
1.组件跳转
使用
router-link组件进行组件导航（无需引入该组件，可直接使用），to后面跟组件路由。如果想要在当前页显示跳转的组件，可以通过<router-view>来显示当前路由匹配到的组件，也可以不使用<router-view>直接跳转到对应的页面。
注：该组件不仅可以显示文字，还可以在其中放按钮的样式进行点击跳转
<!-- 使用router-view -->
<template><div id="app"><div id="header"> <router-link to="/">Home</router-link><router-link to="/about">About</router-link></div><div id="content"><router-view></router-view></div> </div>
</template><!-- 不使用router-view -->
<template> <router-link to="/">Home</router-link> <!-- 点击Home文字跳转到根页面 --><router-link to="/"><button>Home</button></router-link> <!-- 点击Home按钮跳转到根页面 -->
</template>效果如下：一个是文字，一个是按钮
2.路由跳转
路由跳转编程式导航有以下几种常用的方法：
1. router.push：跳转到push的页面，这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL
2.router.replace：跳转到某个页面并替换当前页，它不会向 history 添加新记录，而是跟它的方法名一样，替换掉当前的 history 记录，所有，当用户后退页面时并不是回到跳转之前的那个页面
3.router.go：该方法的参数是一个整数，在 history 记录中前进或后退指定的步数(页数)。参数为 0 时会重新加载页面，但会有短暂白屏
4.router.back ：在 history 记录中，返回上一页（无需参数）
5.router.forward：在 history 记录中，前往下一页（无需参数）
注：在使用编程式导航路由跳转时，需要先引入路由实例router ，即需要先在代码中配置如下：
//组合式代码示例:
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
</script>//选项式代码示例:
<script>
import { useRouter } from 'vue-router';
export default {setup() {const router = useRouter();},
};
</script>(1).router.push({ path: "目标路由位置" })
router.push方法不仅可以跳转页面，还可以在跳转页面时携带参数进行路由传参，其中情况分为两种：普通路由和动态路由
- push仅跳转不传参：
<script>router.push('/') // 根页面，这里的“/”等同于home页面router.push({path: '/about',})
</script>- push跳转并传参(普通路由)
①.query参数（路径参数，类似于GET请求）
<script>
router.push({path: '/about',query: {name: 'Jen'}})
</script>②.params参数（类似于POST请求）
<script>
router.push({name: 'home',params: {title: 'about'}})
</script>- push跳转并传参(动态路由)
需要多引入一个路由对象route来接收参数，代码如下：
注：路由之间跳转用router，获取当前页面的路由信息用route
//组合式代码示例:
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
</script>路由配参：
{path: '/test/:title',name: 'test',component: () => import('../views/TestView.vue')},动态传参：
<script>router.push({path: '/test/' + 666,})
</script>接收参数，路由信息：
<script>
console.log(route);
</script>(2).router.replace({path: "目标路由位置"})
<script>router.replace({ path: "/home" }); //替换当前页面，跳转到home页
</script>(3).router.go(整数)
<script>router.go(1); //前进一个页面router.go(-2); //回退两个页面
</script>(4).router.back()
<script>router.back(); //回退一个页面
</script>(5).router.forward()
<script>router.forward(); //前进一个页面
</script>router和route的区别