Vue3之路由认识

回顾：
原来的vue2路由是通过this.$route和this.$router来控制的。现在vue3有所变化，useRoute相当于以前的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，我们可以更加方便地管理前端路由，提高开发效率。