1、在vue3中有两种路由的引入方式

• 第一种

import { useRouter } from 'vue-router'
const use_router = useRouter()
use_router.push('/pathName')

• 第二种

import router from '@/router'
router.push('/pathName')

2、两种方式的区别

• 第一种方式的使用位置

在vue3中，使用在组件的带setup属性的script标签内

<script setup>
    import { useRouter } from "vue-router"
    const router = useRouter()
</script>

• 第二种方式的使用位置

适用于vue3和vue2版本，可以使用在任意文件中(js文件和vue文件)

main.js中

3、vue3中使用useRouter：操作路由的跳转

1.在vue3中，不能和vue2一样使用this.$router，必须通过导入路由API来使用

import { useRouter } from "vue-touter"

2.useRouter也是一个函数，需要在setup里定义一个变量来获取当前路由

const router = useRouter()

3.此时，就可以通过定义的router来操作路由进行页面的跳转等操作

　　　　// 跳转首页
　　　　router.push({
  　　　　name: 'home',
　　　　})
　　　　// 返回上一页
　　　　router.back()

4、vue3中使用useRoute获取路由信息

1.在vue3中，不能和vue2一样使用this.$route(this.$route.params)，也必须通过导入路由API来使用

       import { useRoute } from "vue-router"

2.在setup里定义一个变量来获取当前的路由信息

       const route = useRoute()

3.此时，就可以通过定义的route来获取当前的路由信息

　　　　// 获取路由名称
　　　　console.log(route.name)

　　　　// 获取路由参数
　　　　console.log(route.params.id)
　　　　// 获取路由元信息
　　　　console.log(route.meta.xxx)

5、通过路由传递参数

1）方式一

• 路由文件来传递参数

  {
    path: '/test/:id',
    name: 'test',
    component: () => import('../views/TestView.vue')
  }

• 接收路由参数

<template>
    <div>
        {{ id }}
    </div>
</template>

<script setup lang="ts">
import { onMounted, toRefs, ref } from 'vue'
import { useRoute } from 'vue-router';

// 接收路由传参
let route = useRoute()
console.log('route->', route);

let {params} = toRefs(route)
let id = ref(0);

onMounted(()=>{
    console.log('id=' + params.value.id);
    id.value = params.value.id;
})
</script>

<style scoped>

</style>

2）方式二

• 路由定义

  {
    path: '/test1/:id',
    name: 'test1',
    component: () => import('../views/Test1View.vue')
  }

• 接收参数

import { onMounted, toRefs, ref } from 'vue'
import { useRoute,useRouter } from 'vue-router';

// 接收路由传参
let route = useRoute()
let router = useRouter()

console.log('route->', route);

let {params} = toRefs(route)
let id = ref(0);

const jumpTo = () => {
    router.push('/test/999');
}


onMounted(()=>{
    console.log('id=' + params.value.id);
    id.value = params.value.id;
})

3）、方式三

• 路由

  {
    path: '/test2',
    name: 'test2',
    component: () => import('../views/Test1View.vue')
  }

• 模板

<RouterLink to="/test2?id=1">测试1</RouterLink>

• 接参

<template>
    <div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, toRefs, ref } from 'vue'
import { useRoute,useRouter } from 'vue-router';

// 接收路由传参
let route = useRoute()

console.log('route->', route);

onMounted(()=>{
    //
    console.log('接参：id = ', route.query.id);
})
</script>

<style scoped>

</style>

参考文章

• https://www.cnblogs.com/pwindy/p/17599074.html
• https://blog.csdn.net/LoveDcolor/article/details/130850157
• https://blog.csdn.net/wdy_2099/article/details/135766435