免费网站网站制作平台,WordPress游览器标签,建设网站教程视频视频视频,做ppt会去什么网站找图本文基于工作项目开发#xff0c;做的整理笔记前几天帮朋友解决这个问题#xff0c;顺带学习了一下#xff0c;做个笔记Mark下。前提条件#xff1a;你已经了解并使用vue#xff0c;能够搭建应用站点。编码环境#xff1a;system#xff1a;OS X EI Capitan 10.13.3npm做的整理笔记前几天帮朋友解决这个问题顺带学习了一下做个笔记Mark下。前提条件你已经了解并使用vue能够搭建应用站点。编码环境systemOS X EI Capitan 10.13.3npm5.5.1nodev8.9.3vue-clilastest相关技术栈vue2 vue-router基于vue.jsvue-router的动态更新TDK.jpg1.router部分直接看代码主要包含一个配置变量mapping也可以抽出去放到单独的配置文件中这里就简化放进来了容易看。在路由配置中给了一个meta字段用于存放对应的TDK信息。注意这里我们发现NewsDetail暂存的TDK信息和News一样没关系因为它和ID有关在app.js那边我们还要具体处理。/**********************************************//* src/router/index.js *//**********************************************/import Vue from vueimport Router from vue-routerimport Layout from /components/layoutimport Home from /components/homeimport News from /components/hot-newsimport Detail from /components/hot-news/detailimport About from /components/info/aboutimport ContactUs from /components/info/contact-usimport JoinUs from /components/info/join-usimport Terms from /components/info/termsimport Error404 from /components/404Vue.use(Router)const mapping {home: {title: xxxxxxxxxxxxxxxx-【官网名称】,metaTags: [{name: keywords,content: xxx, xx, xxxxx, xxx, xxx},{name: description,content: 官网页面的一段描述},],},news: {title: 【新闻热点】_xxxxxxx-官网名称,metaTags: [{name: keywords,content: xxx, xx, xxxxx, xxx, xxx},{name: description,content: 新闻热点页面的一段描述},],},}export default new Router({mode: history,routes: [{path: /,component: Layout,// redirect: /home,hidden: true,children: [{path: ,component: Home,meta: mapping.home,},{path: home,redirect: /,component: Home,meta: mapping.home,},{path: news,component: News,meta: mapping.news,},{path: news/:id,component: NewsDetail,meta: mapping.news,},{path: about,component: About,meta: mapping.home,},{path: contact-us,component: ContactUs,meta: mapping.home,},{path: join-us,component: JoinUs,meta: mapping.home,},{path: terms,component: Terms,meta: mapping.home,},{path: 404,component: Error404,meta: mapping.home,},]},]})2. 看看app.js这边如何使用这段代码中也有一个配置变量mappingFull它主要服务于那种带查询条件的带id的具体路由的TDK。另外注意的就是方法/**********************************************//* src/app.js *//**********************************************/// The Vue build version to load with the import command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from vueimport App from ./Appimport store from ./store;import router from ./routerimport ElementUI from element-ui;import element-ui/lib/theme-chalk/index.css;import /style/base.scssVue.use(ElementUI);Vue.config.productionTip falseconst mappingFull {/news?categaryxxxxx: {title: 【新闻热点】_xxxxx-官网名称,metaTags: [{name: keywords,content: xxx, xx, xxxx, xxx, xxx},{name: description,content: 这一搜索条件的相关描述},],},/news/1: {title: 【xxxxx_新闻热点】_xxxxxx-官网名称,metaTags: [{name: keywords,content: xxx, xx, xxxx, xxx, xxx},{name: description,content: 新闻热点1的相关描述},],},/news/2: {title: 【xxxxx_新闻热点】_xxxxxx-官网名称,metaTags: [{name: keywords,content: xxx, xx, xxxx, xxx, xxx},{name: description,content: 新闻热点2的相关描述},],},/hot-news/3: {title: 【xxxxx_新闻热点】_xxxxxx-官网名称,metaTags: [{name: keywords,content: xxx, xx, xxxx, xxx, xxx},{name: description,content: 新闻热点3的相关描述},],},}router.beforeEach((to, from, next) {const matchPath to.matched.slice().reverse();const meta mappingFull[to.fullPath];// console.log(to.fullPath); // 可以打印输出看看// console.log(meta);let nearestWithTitle undefined;let nearestWithMeta undefined;if (meta) {nearestWithTitle { meta };nearestWithMeta { meta };} else {nearestWithTitle matchPath.find(r r.meta r.meta.title);nearestWithMeta matchPath.find(r r.meta r.meta.metaTags);}if(nearestWithTitle) document.title nearestWithTitle.meta.title;Array.from(document.querySelectorAll([data-vue-router-controlled])).map(el el.parentNode.removeChild(el));if(!nearestWithMeta) return next();nearestWithMeta.meta.metaTags.map(tagDef {const tag document.createElement(meta);Object.keys(tagDef).forEach(key {tag.setAttribute(key, tagDef[key]);});tag.setAttribute(data-vue-router-controlled, );return tag;}).forEach(tag document.head.appendChild(tag));if (to.need to.need.requireAuth) {if (store.getters.token) {next();}else {next(/home);// next({// path: /login,// query: {redirect: to.fullPath} // 将跳转的路由path作为参数登录成功后跳转到该路由// });}}else {next();}});router.afterEach((to,from,next) {window.scrollTo(0,0);})new Vue({store,router,render: h h(App)}).$mount(#app);3. 疑问我们大多都知道SEO优化有很多方式更可行的可能是SSR后端渲染但是毕竟有时候我们就是前端渲染实现某个官网只能找找其他简单可行办法。文中这种做法实际上只有真是访问的时候才可以拿到真正准确的TDK各搜索引擎的爬虫拿到的是静态文件index.html的代码view-source那个时候TDK还没有被替换不知道这种做法是否真的有利于SEO。有待验证。欢迎留言提出此类问题的优化互相学习。学习是一条漫漫长路每天不求一大步进步一点点就是好的。
