项目架构项目目录├──build├──config├──dist│└──static│├──css│├──fonts│├──images│├──js│└──lib├──src│├──api│├──assets││├──global││└──images││└──footer│├──components││├──common││├──新闻││└──简介││└──收费│├──配置│├──mixin│├──路由器│├──服务│├──store│└──util└──static├──images└──lib项目目录是vue-cli自动生成的，你可以根据需要创建其他的。开发实践动态修改不同路由页面的文档标题。我们需要动态修改文档标题。我们可以在路由元信息中配置每个页面的标题，然后在router中修改afterEach钩子函数：importVuefrom'vue';importRouterfrom'vue-router';Vue.use(Router);constrouter=newRouter({mode:'history',routes:[{path:'/',component:Index,meta:{title:'推荐产品获得巨额红利'}},{path:'/news',component:新闻,meta:{title:'ListofAnnouncements'},children:[{path:'',redirect:'list'},{path:'list',component:NewsList},{path:'detail/:newsId',component:NewsDetail,meta:{title:'公告详情'}}]},{path:'/guide',component:GuideProtocol,meta:{title:'新手指南'}}]});//使用afterEach钩子函数确保在路由成功重定向后修改标题。afterEach((route)=>{letdocumentTitle='xxx商城会员平台';route.matched.forEach((path)=>{if(path.meta.title){documentTitle+=`-${path.meta.title}`;}});document.title=documentTitle;});根据URL变化动态更新数据通常在一个列表集合页面中，我们需要进行分页操作，而分页数据需要体现在URL中，那么如何根据URL的变化动态获取数据，我们可以使用watchAPI来监控$watch中的route，同样使用this.$router.replaceAPI改变URL值以下是示例代码common.js：importqsfrom'qs';exportdefault{data(){return{queryParams:{currentPage:1,pageSize:10}};},方法：{handlePageNoChange(e){this.queryParams.currentPage=e;这个.replaceRouter();},replaceRouter(){constquery=qs.stringify(this.queryParams);this.$router.replace(`${location.pathname}?${query}`);},routeChange(){this.assignParams();这个.fetchData();},assignParams(){this.queryParams=Object.assign({},this.queryParams,this.$route.query);}},mounted(){this.assignParams();这个.fetchData();},观看:{$route:'routeChange'}};我们把这部分代码抽取出来放到一个公共的mixin中，在需要的组件中引入它也实现了自定义的fetchData()方法mixin的同名API文档：https://cn.vuejs.org/v2/guide...exportdefaultDemoComponent{mixins:[common],data(){return{//组件内部同名的自定义查询参数将与mixin中的默认参数合并queryParams:{categoryId:'',pageSize:12},}},methods:{fetchData(){//发送请求}}}EventBus使用场景我们在项目中引入了vuex，通常是不需要使用eventbus的，但是有一种情况我们需要用到，也就是在routinghook函数里面的时候，在项目中，我们需要在beforeEnter路由hook外面抛出一个事件，在这个hook函数里面我们是不能去this对象的beforeEnter:(to,from,next)=>{constuserInfo=localStorage.getItem(userFlag);如果(isPrivateMode()){EventBus.$emit('get-localdata-error');下一个（假）；返回;}})在App.vueEventBus的mounted方法中监听这个事件。$on('get-localdata-error',()=>{this.$alert('Donotbrowseinincognitomode');});自定义命令实现埋点数据统计在项目中，通常需要做数据埋点。这时候使用自定义命令就会变得非常简单。在项目入口文件main.js中配置我们的自定义命令//坑埋点指令Vue.directive('stat',{bind(el,binding){el.addEventListener('click',()=>{constdata=binding.value;letprefix='store';if(OS.isAndroid||OS.isPhone){prefix='mall';}analytics.request({ty:`${prefix}_${data.type}`,dc:data.desc||''},'n');},false);}});在页面级别使用路由拦截统计pv第一次尝试在单页应用中埋点数据，项目上线一周后，数据统计后台发现首页的PV高了很多，其他页面的数据非常不正常。后来和数据后台的人交流，问了他们埋点的统计原理，才发现问题所在。传统应用在页面加载的时候一般都会有一个异步的js加载，就像百度的统计代码一样，所以我们会在每个页面加载的时候统计数据；但是，在单页应用中，页面加载只有一次初始化，所以我们需要手动上报其他页面的统计信息。解决方法是使用vue-router的beforeEach或者afterEachhook来上报数据。使用哪一个最好根据业务逻辑来选择。constanalyticsRequest=(to,from)=>{//只统计页面跳转数据，不统计当前页面query的不同数据//所以这里只用path，如果需要统计query可以使用to.fullPathif(to.path!==from.path){analytics.request({url:`${location.protocol}//${location.host}${to.path}`});}};router.beforeEach((to,from,next)=>{if(to.matched.some(record=>record.meta.requiresAuth)){//这里是登录等前置逻辑判断。//判断通过后，上报数据...analyticsRequest(to,from);}else{//不用判断，直接上报数据analyticsRequest(to,from);next();}});在组件中使用我们自定义的指令使用过滤器来实现显示信息的格式如下图的bonusdata信息所示。我们需要把后台返回的bonus格式化成小数点后两位的格式。同时，如果返回的金额是区间类型，我们需要添加
