前言
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。比如在开发新闻模块的过程中，我们通常是根据ID获取对应的数据的，对于数据的渲染用的都是同一个组件。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果。
简单使用
我们在components文件夹中新建两个文件（也是组件），新闻列表v-news.vue和新闻详情v-news-detail.vue。
新增组件代码
v-news.vue完整代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <template>
<div class="v-news">
<ul>
<li v-for="item in lists" :key="item.id">
<router-link :to="'/news/' + item.id">{{ item.title }}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'v-news',
desc: '新闻列表',
data() {
return {
lists: [
{ id: 1, title: '新闻标题 1' },
{ id: 2, title: '新闻标题 2' },
{ id: 3, title: '新闻标题 3' },
{ id: 4, title: '新闻标题 4' },
{ id: 5, title: '新闻标题 5' },
{ id: 6, title: '新闻标题 6' },
]
}
}
}
</script>
<style scoped>
.v-news {
padding: 20px 50px;
}
</style>
|
v-news-detail.vue完整代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <template>
<div class="v-news-detail">
<div>我是新闻详情，我的id是：{{ id }}</div>
</div>
</template>
<script>
export default {
name: 'v-news-detail',
desc: '新闻详情',
data() {
return {
id: this.$route.params.id || ''
}
}
}
</script>
<style scoped>
.v-news-detail {
padding: 20px 40px;
}
</style>
|
修改菜单和路由配置
v-header.vue完整代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
| <template>
<div class="v-header">
<ul class="menus">
<li
class="menu"
v-for="item in menus"
:key="item.id"
>
<router-link :to="item.path">{{ item.name }}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'v-header',
desc: '头部信息',
data() {
return {
menus: [
{ id: 1, name: '首页', path: '/' },
{ id: 2, name: '新闻', path: '/news' },
{ id: 3, name: '关于', path: '/about' },
]
}
}
}
</script>
<style scoped>
.v-header {
width: 100%;
height: 70px;
background-color: #fff;
box-shadow: 3px 3px 3px #ddd;
color: #333;
}
.menus {
list-style: none;
padding: 0 20px;
overflow: hidden;
}
.menu {
float: left;
padding: 0 20px;
height: 70px;
line-height: 80px;
transition: .3s;
}
.menu:hover {
cursor: pointer;
color: #0051ff;
background-color: #efefef;
}
</style>
|
router -> index.js完整代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| // 引入 Vue
import Vue from 'vue';
// 引入 vue-router
import VueRouter from 'vue-router';
// 安装使用 vue-router
Vue.use(VueRouter);
// 引入首页
import vIndex from '../components/v-index.vue';
// 开始使用 vue-router
let routes = new VueRouter({
routes: [
{ path: '/', component: vIndex },
{ path: '/about', component: () => import(/* webpackChunkName: "about" */ '../components/v-about.vue') },
{ path: '/success', component: () => import(/* webpackChunkName: "success" */ '../components/v-success.vue') },
{ path: '/news', component: () => import(/* webpackChunkName: "news" */ '../components/v-news.vue') },
{ path: '/news/:id', component: () => import(/* webpackChunkName: "news" */ '../components/v-news-detail.vue') },
]
});
// 提供接口给外面使用
export default routes;
|
好了，到目前位置，代码已经写完了，我们可以在浏览器上看一下效果。
目前项目目录结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| .
|-- node_modules
|-- public
| |-- favicon.
| |-- index.html
|-- src
| |-- assets
| |-- components
| | |-- HelloWorld.vue
| | |-- v-about.vue
| | |-- v-header.vue
| | |-- v-index.vue
| | |-- v-news-detail.vue
| | |-- v-news.vue
| | |-- v-success.vue
| |-- router
| | |-- index.js
| |-- App.vue
| |-- main.js
|-- .gitignore
|-- babel.config.js
|-- package-lock.json
|-- package.json
|-- README.md
.
|
大家可以对照一下目录，看看文件是否有缺失，另外也看一下代码是否能正常运行，如果有报错，可以私聊我哈。希望大家能动手敲一下代码，好记性不如烂笔头，至理名言。