025通过Vue3的路由参数自动获取菜单项目的解决方案

025通过Vue3的路由参数自动获取菜单项目的解决方案

vue-router使用方法

<router-link to="/about">Go to About</router-link>

this.$router.push('/dashboard')

const routes = [
  // 动态字段以冒号开始
  { path: '/users/:id', component: User },
]
const User = {
  template: '<div>User {{ $route.params.id }}</div>',
}

this.$watch(
  () => this.$route.params,
  (toParams, previousParams) => {
    // 对路由变化做出响应...
  }
)

在 setup 中访问路由和当前路由

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

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()

    function pushWithQuery(query) {
      router.push({
        name: 'search',
        query: {
          ...route.query,
        },
      })
    }

    // 当参数更改时获取用户信息
    watch(
      () => route.params.id,
      async newId => {
        userData.value = await fetchUser(newId)
      }
    )

    // 与 beforeRouteLeave 相同，无法访问 `this`
    onBeforeRouteLeave((to, from) => {
      const answer = window.confirm(
        'Do you really want to leave? you have unsaved changes!'
      )
      // 取消导航并停留在同一页面上
      if (!answer) return false
    })

    const userData = ref()

    // 与 beforeRouteUpdate 相同，无法访问 `this`
    onBeforeRouteUpdate(async (to, from) => {
      //仅当 id 更改时才获取用户，例如仅 query 或 hash 值已更改
      if (to.params.id !== from.params.id) {
        userData.value = await fetchUser(to.params.id)
      }
    })
  },
}

方案一：$router直接调用方式

{
  "currentRoute": {
    "__v_isShallow": true,
    "dep": {
      "w": 0,
      "n": 0
    },
    "__v_isRef": true,
    "_rawValue": {},
    "_value": {
      "fullPath": "/iot/vEditor",
      "path": "/iot/vEditor",
      "query": {},
      "hash": "",
      "name": "vEditor",
      "params": {},
      "matched": [...],
      "meta": {
        "title": "vEditor"
      },
      "href": "/iot/vEditor"
    }
  },
  "listening": true,
  "options": {
    "history": {
      "location": "/iot/vEditor",
      "base": "",
      "state": {
        "back": "/iot/ws",
        "current": "/iot/vEditor",
        "forward": null,
        "replaced": true,
        "position": 27,
        "scroll": {
          "left": 0,
          "top": 0
        }
      }
    },
    "routes": [...]
  },
  "__hasDevtools": true
}

方案二：引入router路由文件调用

import router from ‘@/router’;

获取当前路由办法

• router.currentRoute.value.fullPath