Vue2+VueRouter2+webpack+Axios 构建项目实战目录以及文件结构
vue中修改meta信息,需要使用到 vue-meta 插件
https://github.com/declandewet/vue-meta
切换到项目根目录下,使用npm安装:
npm install vue-meta -D
修改路由 src/router/index.js 内容:
import Vue from 'vue'
import Router from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Meta from 'vue-meta'
import HelloWorld from '@/components/HelloWorld'
import Element from '@/components/Element'
import Metas from '@/components/Meta'
Vue.use(Router)
Vue.use(ElementUI)
Vue.use(Meta)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/element',
component: Element
},
{
path: '/meta',
component: Metas
}
]
})
添加视图组件 src/components/Meta.vue 内容:
<template>
<div>
</div>
</template>
<script>
export default {
name: 'Meta',
data () {
return {
title:'meta',
description: 'A blog post about some stuff'
}
},
metaInfo () {
return {
title: this.title,
meta: [
{ vmid: 'description', name: 'description', content: this.description },
{ vmid: 'scale', name: 'viewport', content: 'width=device-width,initial-scale=1' }
]
}
}
}
</script>
显示效果如下: