回顾:
原来的vue2路由是通过this. r o u t e 和 t h i s . route和this. route和this.router来控制的。现在vue3有所变化,useRoute相当于以前的this. r o u t e ,而 u s e R o u t e r 相当于 t h i s . route,而useRouter相当于this. route,而useRouter相当于this.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
三、总结
useRouter 和 useRoute 是 Vue.js 3.2 中新增的两个用于路由管理的 Composition API。 useRouter 用于获取路由实例。而 useRoute 用于获取当前路由对象。使用这两个 API,我们可以更加方便地管理前端路由,提高开发效率。