V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
wwwwzf
V2EX  ›  Vue.js

vue cli4 中定义每个页面的 title 以及 keywords\Keywords 的方法

  •  
  •   wwwwzf ·
    zoomla · 2020-02-12 22:00:49 +08:00 · 3167 次点击
    这是一个创建于 1746 天前的主题,其中的信息可能已经有所发展或是发生改变。

    先晒下版本 PS D:\vue\vueJS-001\dist> vue -V @vue/cli 4.1.2

    一个好网站,没有优秀的 title 以及 keywords\Keyword 就不行,在 vue cli4 中如何定义这些呢,这里分享两个方法。

    方法一:使用 vue-router 设置每个页面的 title

    进入 router 文件夹底下的 index.js 文件

    首先引入:

    import Vue from 'vue'
    import Router from 'vue-router'
    

    然后在路由里面配置每个路由的地址:

      routes: [
    	{          /* (首页)默认路由地址 */
    	  path: '/',
    	  name: 'Entrance',
    	  component: Entrance,
    	  meta: {
    		title: '首页入口'
    	  }
    	},
    	{          /* 修改昵称 */
    	  path: '/modifyName/:nickName',
    	  name: 'modifyName',
    	  component: modifyName,
    	  meta: {
    		title: '修改昵称'
    	  }
    	},
    	{          /* 商品详情 */
    	  path: '/goodsDetail',
    	  name: 'goodsDetail',
    	  component: goodsDetail,
    	  meta: {
    		title: '商品详情'
    	  }
    	},
    	{ /* Not Found 路由,必须是最后一个路由 */
    	  path: '*',
    	  component: NotFound,
    	  meta: {
    		title: '找不到页面'
    	  }
    	}
      ]
    

    在每一个 meta 里面设置页面的 title 名字,最后在遍历

    router.beforeEach((to, from, next) => {
      /* 路由发生变化修改页面 title */
      if (to.meta.title) {
    	document.title = to.meta.title
      }
      next()
    })
    

    这样就为每一个 VUE 的页面添加了 title

    #方法二 使用 vue-meta 进行 mate 动态管理 HTML head 信息 vue-meta 的官方文档在这里 https://github.com/declandewet/vue-meta 文档中比较详细地说明了在浏览器端和服务器端如何使用 vue-meta 修改页面头部信息,这里我主要介绍下在 SPA 项目中管理 meta info 的使用方法。,

    vue 单页运用中,对单独页面使用 meta 的时候,他不是直接修改,而是插在下面覆盖上面的 meta 进行修改。 1、安装 npm install vue-meta --save

    2、在 main.js 引入

    	import Meta from 'vue-meta'
    	Vue.use(Meta)
    

    3、为需要修改的页面单独定义 metaInfo

    export default {
    metaInfo: {
    title: 'This is the test',
    meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes' }
    ]
    }
    }
    

    4、异步请求数据可以使用

    如果 component 中使用了异步请求数据,可以使用 metaInfo() 方法。

    <template>
      <div>
    	<h1>{{{ title }}}</h1>
      </div>
    </template>
    
    <script>
      export default {
    	name: 'post',
    	data () {
    	  return {
    		title: ''
    		description: '这是一篇文章...'
    	  }
    	},
    	metaInfo () {
    	  return {
    		title: this.title,
    		meta: [
    		  { vmid: 'description', name: 'description', content: this.description }
    		]
    	  }
    	},
    	created () {
    	  this.initData()
    	},
    	methods: {
    	  initData () {
    		axios.get('some/url').then((resp) => {
    		  // 设置 title 时 metaInfo 会同时更新
    		  this.title = resp.title
    		  this.description = resp.decription
    		})
    	  }
    	}
      }
    </script>
    

    再看一个实例:

     export default {
    	name: 'DealRepair',
    	metaInfo: {
    	  title: 'This is the test',
    	  meta: [
    		{ charset: 'utf-8' },
    		{ name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' }
    	  ]
    	},
    	data () {
    	  return {
    
    	  }
    	},
    	mounted(){
    	},
    	methods:{
    
    	}
    }
    

    第三个实例,附与其它数据并存:

    <template>
    	<div>
    		<div class="container">
    			<ul class="list-unstyled">
    			<li v-for="node in nodes" :key="node.NodeID"><a href="javascript:;" @click="navTo(node)">{{node.NodeName}}</a></li>
    			</ul>
    
    
    		</div>
    	</div>
    </template>
    
    <script>
    	export default{
    
    		data:function(){
    			var model={nodes:[]};
    			var pid=this.$route.params.id;
    			window.console.log(pid);
    			this.jsp("node_list",{"pid":pid}).then((ret)=>{
    				model.nodes=JSON.parse(ret.result);
    			})
    			return model;
    		},
    		metaInfo: {
    			title: '节点列表',
    			meta: [
    				{ description: '自动逻辑的列表' },
    				{ keywords: '节点,列表,栏目' },				
    			]
    		},		
    		methods:{
    			navTo:function(node){
    				this.$router.push("/NodeContent/"+node.NodeID);
    			}
    		},
    	}
    </script>
    
    <style>
    </style>
    
    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2532 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 02:35 · PVG 10:35 · LAX 18:35 · JFK 21:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.