（1）在router目录下的index.js文件中配置“热销推荐”的动态路由
import Vue from 'vue' import Router from 'vue-router' import Home from '@/pages/home/Home' import City from '@/pages/city/City' import Detail from '@/pages/detail/Detail' Vue.use(Router) export default new Router({ routes: [{ path: '/', name: 'Home', component: Home }, { path: '/city', name: 'City', component: City }, { // :id表示动态路由 path: '/detail/:id', name: 'Detail', component: Detail }] })（2）在Recommend组件中，使用router-link进行路由的跳转
<template> <div> <div class="title">热销推荐</div> <ul> <!-- router-link会自动将li变成a标签，此处将li写到tag中，可以保证将其渲染成li标签 --> <router-link tag="li" class="item border-bottom" v-for="item of list" :key="item.id" :to="'/detail/' + item.id" > <img class="item-img" :src="item.imgUrl" /> <div class="item-info"> <p class="item-title">{{item.title}}</p> <p class="item-desc">{{item.desc}}</p> <button class="item-button">查看详情</button> </div> </router-link> </ul> </div> </template>（1）通过v-show默认显示返回按钮 （2）头部部分与上一个v-show取反，默认不显示头部
<template> <div> <!-- 返回到首页 --> <router-link tag="div" to="/" class="header-abs" v-show="showAbs"> <div class="iconfont header-abs-back"></div> </router-link> <div class="header-fixed" v-show="!showAbs" :style="opacityStyle" > <router-link to="/"> <div class="iconfont header-fixed-back"></div> </router-link> 景点详情 </div> </div> </template>（3）添加监听滚动事件，滚动距离超过60，就隐去返回按钮，显示头部，并添加opacity渐隐渐现的效果
methods: { handleScroll () { // 表示滚动的距离 // 一旦滚动距离超过60，就不显示头部 const top = document.documentElement.scrollTop if (top > 60) { // 超过140，就会完全显现 let opacity = top / 140 opacity = opacity > 1 ? 1 : opacity this.opacityStyle = { opacity } this.showAbs = false } else { this.showAbs = true } } }, mounted () { // 注意这是全局事件，离开该组件时，需要进行解绑，否则会出现bug // 添加对scroll的监听事件 window.addEventListener('scroll', this.handleScroll) }（4）因添加了全局事件，在离开该组件的操作后，需要对全局事件解绑
unmounted () { // 对上述全局事件进行解绑 // 此处用了mounted和unmounted，也可以使用activated和deactivated // 移除对scroll的监听事件 window.removeEventListener('scroll', this.handleScroll) }（1）详情页组件中，给list组件传递数据
<div class="content"> <detail-list :list="list"></detail-list> </div>（2）list组件，递归遍历数据中的子项
<template> <div> <div class="item" v-for="(item, index) of list" :key="index" > <div class="item-title border-bottom"> <span class="item-title-icon"></span> {{item.title}} </div> <!-- 递归组件 --> <div v-if="item.children" class="item-chilren"> <detail-list :list="item.children"></detail-list> </div> </div> </div> </template>因为keep-alive的缓存机制，第二次从首页调到详情页时，详情页不再刷新，重新获取新的数据，解决该问题的办法有两个：一是可以使用activated生命周期函数（之前讲过），二是在App.vue中，通过exclude命令排除掉详情页面。
<template> <div id="app"> <!-- 使用keep-alive，路由中的内容被加载之后，就放到内存中，供下次使用 --> <!-- exclude表示除了Detail页面，其它页面都会被缓存 --> <keep-alive exclude="Detail"> <!-- 显示的是当前路由地址所对应的内容 --> <router-view/> </keep-alive> </div> </template>组件中Name值的作用 （1）递归组件的调用 （2）对具体页面取消缓存时 （3）便于Vue调试
（2）多个页面间的滚动影响bug，在Vue Router中有详细介绍 其作用是让路由每次切换页面时，都自动滚动到顶部
import Vue from 'vue' import Router from 'vue-router' import Home from '@/pages/home/Home' import City from '@/pages/city/City' import Detail from '@/pages/detail/Detail' Vue.use(Router) export default new Router({ routes: [{ path: '/', name: 'Home', component: Home }, { path: '/city', name: 'City', component: City }, { // :id表示动态路由 path: '/detail/:id', name: 'Detail', component: Detail }], // 各页面间跳转，默认滚动到页面顶部 scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } } })