vue2.0导航钩子beforeEach的使用(参考别人的,很简单)
在store文件router.js里面(黄色,红色部分是重点)import Vue from 'vue'import Router from 'vue-router'//出行问卷调查import TravelQuestionnaire from '../components/Questionnaire/TravelQuestionnaire.vue'//趣味调查import Intere...
·
在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()
})
更多推荐
已为社区贡献3条内容
所有评论(0)