如何定义 Vue 的动态路由？如何获取传过来的动态参数？

Vue 项目中刷新页面出现 undefined、Object 类型报错接口，大多是动态路由使用不规范、传参方式混淆导致。本文系统讲解 Vue 动态路由的定义规则、参数获取、页面跳转写法，详解 params 与 query 参数区别，同时梳理组件复用不刷新、参数类型异常等高频坑点，并提供规范、可落地的路由开发最佳实践。

相信大家遇到过这样的情况，页面一刷新，接口直接打成了：

GET /api/stock/undefined/detail
GET /api/user/[object Object]

这种问题我一般不先看接口，也不先怪后端。先看路由。十有八九是动态路由没定义明白，或者传参时把 params 和 query 搅在一起了。

Vue 里所谓动态路由，最常见就是路径里有一段不是写死的。

比如库存详情页，不可能给每个库存单号都配一个页面：

/stock/SK20240601001
/stock/SK20240601002
/stock/SK20240601003

正确做法是把变化的那一段抽出来：

const routes = [
  {
    path: '/stock/:stockNo',
    name: 'stockDetail',
    component: () => import('./pages/StockDetail.vue')
  }
]

这里的 :stockNo 就是动态参数。

它能匹配：

/stock/SK20240601001
/stock/SK20240601002

但是不会匹配：

/stock
/stock/SK001/logs

这个地方别想复杂。冒号后面的名字，就是你后面取参数时用的 key。

在页面里取参数，一般这么写：

import { useRoute } from 'vue-router'
import { onMounted } from 'vue'

const route = useRoute()

onMounted(() => {
  const stockNo = route.params.stockNo

  console.log('[stock-detail] route param stockNo =', stockNo)

  loadStock(stockNo)
})

function loadStock(stockNo) {
  if (!stockNo) {
    console.warn('[stock-detail] empty stockNo, skip request')
    return
  }

  fetch(`/api/stock/${stockNo}/detail`)
}

这里有个小坑，route.params.stockNo 拿到的基本都是字符串。

即使你的路径是：

/user/10086

拿到的也是：

'10086'

不是数字 10086。

所以写这种代码我第一眼就不太信：

const userId = route.params.userId

if (userId > 0) {
  loadUser(userId)
}

能跑，不代表写得稳。最好自己转一下，还要挡一下脏参数：

function pickUserId(route) {
  const raw = route.params.userId
  const userId = Number(raw)

  if (!Number.isInteger(userId) || userId <= 0) {
    console.warn('[user-page] bad userId:', raw)
    return null
  }

  return userId
}

路由可以定义多个动态参数。比如仓库货架页：

const routes = [
  {
    path: '/warehouse/:warehouseId/shelf/:shelfCode',
    name: 'shelfDetail',
    component: () => import('./pages/ShelfDetail.vue')
  }
]

访问地址：

/warehouse/12/shelf/A-09

页面里取：

import { useRoute } from 'vue-router'

const route = useRoute()

const warehouseId = route.params.warehouseId
const shelfCode = route.params.shelfCode

console.log('[shelf]', warehouseId, shelfCode)

这个写法能用，但我更喜欢把参数通过 props 传进组件。

路由配置这么写：

const routes = [
  {
    path: '/warehouse/:warehouseId/shelf/:shelfCode',
    name: 'shelfDetail',
    component: () => import('./pages/ShelfDetail.vue'),
    props: route => {
      return {
        warehouseId: Number(route.params.warehouseId),
        shelfCode: String(route.params.shelfCode || '')
      }
    }
  }
]

组件里就不用到处摸 route.params 了：

export default {
  props: {
    warehouseId: Number,
    shelfCode: String
  },

  mounted() {
    console.log('[shelf-detail] props:', this.warehouseId, this.shelfCode)
    this.loadShelf()
  },

  methods: {
    loadShelf() {
      if (!this.warehouseId || !this.shelfCode) {
        console.warn('[shelf-detail] param missing')
        return
      }

      fetch(`/api/warehouse/${this.warehouseId}/shelf/${this.shelfCode}`)
    }
  }
}

这段代码不是为了显得高级，是为了后面好维护。

页面组件只关心 warehouseId 和 shelfCode，不关心它们来自路由、弹窗、还是父组件。以后这个组件被别的页面复用，少改一堆东西。

再说跳转。

不要这样写：

router.push('/stock/' + stockNo)

能用，但容易在参数里混进 /、空格、中文的时候翻车。业务里单号一般还好，碰到分类名、文件名、设备编码，就不好说了。

我更习惯用命名路由：

router.push({
  name: 'stockDetail',
  params: {
    stockNo: row.stockNo
  }
})

这里要注意一个很烦的小点：用了 params，最好配合 name。别一边写 path，一边塞 params，最后发现参数没按你想的拼上去。

这种代码我见过很多次：

router.push({
  path: '/stock',
  params: {
    stockNo: row.stockNo
  }
})

它看着像要跳到详情页，实际很可能只是去了 /stock。然后页面里一取参数就是 undefined，接口也跟着炸。

如果你非要用 path，那就自己把路径拼完整：

router.push({
  path: `/stock/${encodeURIComponent(row.stockNo)}`
})

动态参数变了，组件不一定会重新创建。

比如你已经在：

/stock/SK001

然后点击列表切到：

/stock/SK002

如果还是同一个组件，mounted 不会再跑一遍。这个坑挺隐蔽，尤其是详情页左右切换时。

这时要监听参数变化：

import { useRoute } from 'vue-router'
import { watch } from 'vue'

const route = useRoute()

watch(
  () => route.params.stockNo,
  stockNo => {
    console.log('[stock-detail] stockNo changed:', stockNo)

    if (!stockNo) {
      return
    }

    loadStock(stockNo)
  },
  {
    immediate: true
  }
)

function loadStock(stockNo) {
  fetch(`/api/stock/${stockNo}/detail`)
}

这个 immediate: true 我一般会加上。第一次进页面也跑，后面参数变化也跑，逻辑集中一点，不用 onMounted 里写一份，watch 里再写一份。

动态路由参数和 query 参数也别混。

这种是动态参数：

/stock/SK001

取：

route.params.stockNo

这种是 query：

/stock?stockNo=SK001

取：

route.query.stockNo

两种都能传值，但语义不一样。

像详情页的主键，我更倾向放路径里：

/order/OD20240601001

像筛选条件、页码、tab，我更倾向放 query 里：

/order/OD20240601001?tab=logs&page=2

对应路由可以这样写：

router.push({
  name: 'orderDetail',
  params: {
    orderNo: order.orderNo
  },
  query: {
    tab: 'logs',
    page: 1
  }
})

页面里：

const orderNo = route.params.orderNo
const tab = route.query.tab || 'base'
const page = Number(route.query.page || 1)

console.log('[order-detail]', { orderNo, tab, page })

最后再补一个我平时会加的拦截。

有些页面参数不合法，别等接口 404 了才知道。路由层先拦一下：

{
  path: '/user/:userId',
  name: 'userProfile',
  component: () => import('./pages/UserProfile.vue'),
  beforeEnter(to) {
    const userId = Number(to.params.userId)

    if (!Number.isInteger(userId) || userId <= 0) {
      console.warn('[router] invalid userId:', to.params.userId)
      return {
        name: 'notFound'
      }
    }

    return true
  }
}

动态路由就这几件事：

路径里用 :xxx 定义参数；页面里从 route.params.xxx 取；跳转时优先用 name + params；参数变化时别只依赖 mounted；数字自己转，脏值自己挡。

真正在项目里出问题的，往往不是不会写 :id，而是默认它永远有值、永远类型正确、页面永远会重新加载。

这几个默认，我现在都不信。

以上关于如何定义 Vue 的动态路由？如何获取传过来的动态参数？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。