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>