本文主要包含vue,vue-router,es6等相关知识,疯林希望在学习及工作中可以帮助到您
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件(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
至此，动态路由就可以使用了，以上代码亲测
本文纯手打，有不当之处请留言！谢谢！