vue2.0导航钩子beforeEach的使用(参考别人的,很简单)

在store文件router.js里面(黄色,红色部分是重点)

import Vue from 'vue'
import Router from 'vue-router'
//出行问卷调查
import TravelQuestionnaire from '../components/Questionnaire/TravelQuestionnaire.vue'
//趣味调查
import Interestingquestion from '../components/Questionnaire/Interestingquestion.vue'
//答完题界面
import Submissionsuccess from '../components/Questionnaire/Submissionsuccess.vue'
//问卷调查列表
import Questionnaire from '../components/Questionnaire/QuestionnaireList.vue'
//首次登陆动画
 import PlanningRoute from '../components/Plan/PlanningRoute.vue'
//高德版(规划路线)
import PlanningRouteGao from '../components/Plan/PlanningRouteGao.vue'
//分享路线(推荐规划)
import Sharingroute from '../components/Plan/Sharingroute.vue'
//分享路线(直线规划)
import Shareastraightline from '../components/Plan/Shareastraightline.vue'
//我的线路列表
import Mysuggestion from '../components/Personal/Mysuggestion.vue'
//搜索界面
import Search from '../components/search/search.vue'
//不吐不快
import Ridicule from '../components/ridicule/ridicule.vue'
//出行问卷提交成功后界面
import Travelsuccess from '../components/Questionnaire/Travelsuccess.vue'
//关于我们
import AboutusList from '../components/Aboutus/AboutusList.vue'
//直线规划热力图
import Linearheat from '../components/Map/Linearheat.vue'
//推荐规划热力图
import Recommendheat from '../components/Map/Recommendheat.vue'
//热力图列表
import hostList from '../components/Map/hostList.vue'
//首次登陆版
import PlanningRoute2 from '../components/Plan/PlanningRoute2.vue'
//关于我们-功能介绍(目前空白)
import introduce from '../components/Aboutus/introduce.vue'
//测试使用的
import ceshi from '../components/Plan/ceshi.vue'
import ceshi1 from '../components/Plan/ceshi1.vue'
// 问券调查没结果页
import Noask from '../components/Questionnaire/Noask.vue'
// 趣味问题没结果页
import Boring from '../components/Questionnaire/Boring.vue'
//趣味回答列表
import InterestList from '../components/Questionnaire/InterestList.vue'
//加载页面
import login from '../components/Plan/Login.vue'
//我的路线详情页面
import MyRouteDetails from '../components/Personal/MyRouteDetails.vue'
//用户已答完显示界面
import EmptyPage from '../components/Questionnaire/EmptyPage.vue'
//错误信息用户提示
import WarnUser from '../components/Questionnaire/WarnUser.vue'
//空白页
import Blank from '../components/Questionnaire/Blank.vue'

Vue.use(Router);

export default new Router({
  routes: [
    { //规划路线中转路由
      path: '/',
      component:Questionnaire

    },
    {//趣味回答列表
      path: '/InterestList',
      component: InterestList,

	//配置meta,很重要
      meta: {title: "趣味问答列表"}
    },
    {// 趣味问题没结果页
      path:'/Boring',
      component:Boring,
      meta:{title:'Boring'}
    },
    {// 问券调查没结果页
      path:'/Noask',
      component:Noask,
      meta:{title:'Noask'}
    },
    {
      //分享路线(直线规划)
      path: '/Shareastraightline',
      component: Shareastraightline,
      meta: {title: "分享"}
    },
    {//关于我们-功能介绍(目前空白)
      path:'/introduce',
      component:introduce,
      meta:{title:'About'}
    },
    {
      //首次登陆动画
     path:'/PlanningRoute2',
     component:PlanningRoute2
    },
    //首次登陆动画
    {
      path:'/PlanningRoute',
      component:PlanningRoute,
      meta:{title:"规划导航"}
    },
    {
      //我的建议列表
      path: '/Mysuggestion',
      component: Mysuggestion,
      meta: {title: "我的建议列表"}
    },
    {
      //直线规划热力图
      path:'/Linearheat',
      component:Linearheat,
      meta:{title:"直线热力图"}
    },
    {
      //推荐规划热力图
      path:'/Recommendheat',
      component:Recommendheat,
      meat:{title:"推荐热力图"}
    },
    {
      //热力图列表
      path: '/hostList',
      component: hostList,
      meta: {title: "热力图列表"}
    },
    {
      path: '/Ridicule',
      component: Ridicule,
      meta: {title: "不吐不快"}
    },
    {
      path:'/AboutusList',
      component:AboutusList,
      meta:{title:"关于我们"}
    },
    {
      //出行问卷调查
      path: '/TravelQuestionnaire',
      name: 'TravelQuestionnaire',
      component: TravelQuestionnaire,
      meta: {title: "出行问卷调查"}
    },
    {
      //出行问卷提交成功后界面
      path: '/Travelsuccess',
      component: Travelsuccess,
      meta: {title: "提交成功"}
    },
    {
      //趣味调查
      path: '/Interestingquestion',
      name: 'Interestingquestion',
      component: Interestingquestion,
      meta: {title: "趣味问答"}
    },
    {
      //答完题界面
      path: '/Submissionsuccess',
      name: 'Submissionsuccess',
      component: Submissionsuccess,
      meta:{title:"答题成功"}
    }, {
      //问卷调查列表
      path: '/Questionnaire',
      name: 'Questionnaire',
      component: Questionnaire,
      meta: {title: "问卷调查列表"}
    }, {
      //规划路线
      path: '/PlanningRouteGao',
      name: 'PlanningRouteGao',
      component: PlanningRouteGao,
      meta: {title: "路线规划"}
    }, {
      //分享路线
      path: '/Sharingroute',
      name: 'Sharingroute',
      component: Sharingroute,
      meta: {title: "分享路线"}
    },
    {
      path: '/search',
      component: Search,
      meta:{title:"搜索"}
    },
    {
      //登录页
      path: '/login',
      component: login,
      meta:{title:"小轨当家"}
    },
    {
      //我的路线详情页面
      path:'/MyRouteDetails',
      name:'MyRouteDetails',
      component:MyRouteDetails,
      meta:{title:"路线详情"}
    },
    {
      //已答完界面
      path:'/EmptyPage',
      name:'EmptyPage',
      component:EmptyPage,
      meta:{title:"EmptyPage"}
    },
    {
      //已答完界面
      path:'/WarnUser',
      name:'WarnUser',
      component:WarnUser,
      meta:{title:"答题成功"}
    },
    {
      //空白界面
      path:'/Blank',
      name:'Blank',
      component:Blank,
      meta:{title:"空白"}
    },
    {
    //  测试页面
      path:'/ceshi1',
      name:'ceshi1',
      component:ceshi1,
      meta:{title:"测试"}
    }
  ]
})

在main.js里面添加

//定义全局钩子,在路由跳转时做相应的处理(替换title)
router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})