router

Vue3 Router

Router路由管理

在 Vue 3 中，useRoute 和 useRouter 都是 Vue Router 提供的组合式 API，用于在组合式函数中访问路由。

区别：

• useRoute 用于访问当前路由的状态，是只读的。
• useRouter 用于执行路由操作，如导航、切换、添加路由等。

---

• useRoute

  • 返回当前激活的路由信息，是一个只读的响应式对象。

  • 可以获取路由的‘meta’、 path、params、query、name 等属性。

  • 示例：

    import { useRoute } from 'vue-router'
    
    const route = useRoute()
    console.log(route.path) // 输出当前路径
    console.log(route.params) // 获取路由参数

• useRouter

  • 返回当前组件的路由实例对象，可以使用它进行添加路由、导航等操作。

  • 提供了‘addRoute’、 push、replace 等方法

  • 示例：

    import { useRouter } from 'vue-router'
    
    const router = useRouter()
    const goHome = () => {
      router.push({ name: 'Home' }) // 导航到名为 'Home' 的路由
      //遍历数据中的路由信息添加到main路由下
      toRaw(routerList.value).forEach(item => {
              router.addRoute('main',item)
         });
    }

---