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参数

<script>
router.push({path: '/about',query: {name: 'Jen'}})
</script>

        ②.params参数

<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的区别