Vue.js 学习笔记十三：Vue Router 之动态路由

目录

动态路由

---

动态路由

在某些情况下，一个页面的 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 }