当前位置：首页 > news >正文

Vue3之路由认识

news 2025/6/29 16:37:54

回顾：
原来的vue2路由是通过this. $ro u t e 和 t hi s .$ router来控制的。现在vue3有所变化，useRoute相当于以前的this. $ro u t e ，而 u se R o u t er 相当于 t hi s .$ router

一、路由搭建

1. 安装依赖并新建router.js进行路由配置

注：可以采用路由抛出的形式，按模块进行引用

npm install vue-router@4

router.js

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import featureManage from '@/router/featureManage'const routes: Array<RouteRecordRaw> = [// 模块导入的路由...featureManage,
]
const router = createRouter({
//  初始化路由配置history: createWebHashHistory(),routes,
})
export default router

/router/featureManage.js

export default [{path: '/featureList',name: 'featureList',component: () => import('@/views/featureList/Index.vue'),},
]

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 引入路由
createApp(App).use(router).use(MTD).mount('#app')

二、路由之间的通信

useRouter 的用法

在前端开发中，我们经常需要程序处理用户的路由导航，这时候就需要用到 useRouter。它是一个用于获取当前路由实例的函数，我们可以调用这个函数来获取路由实例，然后进行路由导航。

useRoute 的用法

除了需要导航路由之外，我们还需要获取一些路由信息，这时候就需要用到 useRoute。它是一个用于获取当前路由对象的函数，我们可以调用这个函数来获取路由的参数、查询参数等信息。

1. 引入路由

import { useRouter, useRoute } from 'vue-router'

2. 定义变量

const $router = useRouter()  // 这是路由跳转的
const $route = useRoute()  // 用于接收路由参数的

3.使用

（1）路由跳转($router)

显式传参query （path与query搭配），传参在url地址栏上显示

方式一：
```
$router.push('/add?name=12&age=12') // add/是要跳转的路由  name、age是参数
```
方式二：
```
$router.push({path: '/add', query: {name: "12",age: 12
}})
```
显示query在浏览器的url上，如果你直接通过字符串的方式去取，可能会涉及转码等问题，当然useRoute将这些都处理好了，所以还是推荐通过useRoute.query去取显式路由的参数
隐式传参params（params与name搭配）

注意：

隐式params在刷新后可能会消失，我们可以在它存在的时候存如缓存中，如localstorage
隐式params比显式query相对而言更安全，不会将参数直接暴露给用户

（2）获取参数($route)
```
const name = $route.query.name  // 获取路由的name参数值
const age = $route.query.age  // 获取路由的age参数值
// 或者如果name和params搭配的话，可通过params获取参数
// $route.params
```