Vue-Router(二) 动态路由

Vue-Router(二) 动态路由

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件(vue-router)

比如说一个商城的商品详情页面，详情页面是同一个页面，但是可以根据不同的商品id去展示每一个商品的详情，这时候就用到我们的动态路由

我们先看一下官网中动态路由的介绍：

模式	匹配路径	$route.params
/user/:username	/user/evan	{ username: ‘evan’ }
/user/:username/post/:post_id	/user/evan/post/123	{ username: ‘evan’, post_id: 123 }

$route 路由信息对象，表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录，不多说，有兴趣的小伙伴可以去

看一下点这里你就知道了，着重说一下动态路由的使用

首先在 components 目录下新建一个商品列表页面和一个商品详情页面，商品列表界面命名为 goodsList.vue 详情页面 goodsDetails.vue

goodsList.vue

<template>
<div>   //  商品列表
<router-link class="q" to="/goodsDetail/商品0">商品 0</router-link>
<router-link class="q" to="/goodsDetail/商品1">商品 1</router-link>
<router-link class="q" to="/goodsDetail/商品2">商品 2</router-link>
<router-link class="q" to="/goodsDetail/商品3">商品 3</router-link>
<router-link class="q" to="/goodsDetail/商品4">商品 4</router-link>
<router-link class="q" to="/goodsDetail/商品5">商品 5</router-link>
<router-link class="q" to="/goodsDetail/商品6">商品 6</router-link>
<router-link class="q" to="/goodsDetail/商品7">商品 7</router-link>
<!-- <div>
<router-view></router-view>
</div>-->
</div>
</template>

<script type="text/ecmascript-6">
export default {}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.q{
display: block;
}
</style>

goodsDetails.vue

<template>
<div class="detail">
// $route.params 包含了 动态片段 和 全匹配片段，就是说商品 id 会在这里面
这是{{$route.params.id}}详情页面
</div>
</template>

<script type="text/ecmascript-6">
export default {}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.detail {
width: 200px;
height: 100px;
margin: auto;
}
</style>

接下来我们来配置一下路由

// 导入组件 和 依赖
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from '@/components/goodsList'
import GoodsDetail from '@/components/goodsDetails'
// 告诉 vue 你要使用 route
Vue.use(Router)
// 定义路由配置项并导出
export default new Router({
mode: 'history',
redirect: 'goodslist',
routes: [
{
path: '/',
name: 'goodslist',
component: GoodsList
},
{
path: '/goodsDetail/:id',
name: 'goodsDetail',
component: GoodsDetail
}
]
})

这样路由就配置好了，现在我们来运行它

npm run dev

至此，动态路由就可以使用了，以上代码亲测

本文纯手打，有不当之处请留言！谢谢！