526互联

vue3路由的两种引入方式useRouter和router进行页面跳转

发布时间 2023-08-01 21:32:05作者: pwindy

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

第一种

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

第二种

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

 2.两种方式的区别

2.1.第一种方式的使用位置

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

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

2.2.第二种方式的使用位置

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

main.js中

3.vue3中使用useRouter---操作路由的跳转

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

      import { useRouter } from "vue-touter"

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

       const router = useRouter()

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

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

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

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

       import { useRoute } from "vue-router"

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

       const route = useRoute()

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

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

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

 

 

参考---https://blog.csdn.net/weixin_49042147/article/details/129430764