目录
动态路由
在某些情况下,一个页面的 path 路径可能是不确定的,比如我们进入商品详情界面时,页面结构都一样,只有商品 id 不同,这个时候就可以使用动态路由。
...
import Goods from '../views/goods'
const routes = [
...
{
path: '/goods/:id',
name: 'goods',
component: Goods
}
]
...
你可以在一个路由中设置多段“路径参数”,对应的值都会设置到 $route.params
中。
<template>
<div>
<h2>我是商品 {{ $route.params.id }}</h2>
</div>
</template>
<script>
export default {
name: 'goods'
}
</script>
<style>
</style>
模式 | 匹配路径 | $route.params |
---|---|---|
/goods/:id | /goods/1 | { id: 1 } |
/goods/:type_id/:id | /goods/3/4 | { type_id: 3, id: 4 } |