前端
新建景点详情各视图的文件夹（@/views/sight）
记录url（@/router/index.js）
引入视图
1
2
3
4
5
import SightList from '../views/sight/SightList.vue'
import SightDetail from '../views/sight/SightDetail.vue'
import SightInfo from '../views/sight/SightInfo.vue'
import SightComment from '../views/sight/SightComment.vue'
import SightImage from '../views/sight/SightImage.vue'
记录url
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
const routes = [
...
// 景点列表
{
path: '/sight/list',
name: 'SightList',
component: SightList
},
// 景点详情
{
path: '/sight/detail/:id',
name: 'SightDetail',
component: SightDetail
},
// 景点介绍
{
path: '/sight/info/:id',
name: 'SightInfo',
component: SightInfo
},
// 评论列表
{
path: '/sight/comment/:id',
name: 'SightComment',
component: SightComment
},
// 景点图片
{
path: '/sight/image/:id',
name: 'SightImage',
component: SightImage
}
]
实现跳转
景点列表
@/components/common/ListSight.vue
1
2
3
4
5
6
<template>
<router-link class="sight-item"
:to="{name: 'SightDetail', params: {id: item.id}}">
...
</router-link>
</template>
@/components/home/HotBox.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
<template>
<!-- 热门景点 -->
<div class="home-hot-box">
<!-- 顶上导航 -->
<van-cell
title="热门推荐"
icon="/static/home/hot/fire.png"
value="全部榜单"
title-style="text-align:left"
is-link
:to="{name: 'SightList', query: {name: '热门景点'}}"/>
<!-- // 顶上导航 -->
...
<!-- 景点列表 -->
<div class="box-main">
<router-link class="hot-item"
v-for="item in dataList"
:key="item.id"
:to="{name: 'SightDetail', params: {id: item.id}}">
...
</router-link>
</div>
<!-- // 景点列表 -->
</div>
</template>
@/components/home/FineBox.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
<!-- 精选景点 -->
<div class="home-fine-box">
<!-- 顶上导航 -->
<van-cell
title="精选景点"
icon="location-o"
value="更多"
title-style="text-align:left"
is-link
:to="{name: 'SightList', query: {name: '精选景点'}}"/>
<!-- // 顶上导航 -->
...
</div>
</template>