前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue路由以及SEO配置

Vue路由以及SEO配置

作者头像
码客说
发布2019-10-22 17:12:34
1.4K0
发布2019-10-22 17:12:34
举报
文章被收录于专栏:码客

简单路由

默认的路由配置是这样的

代码语言:javascript
复制
export default new Router({
    mode: 'hash',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            name: 'login',
            component: Login
        },
        {
            path: '/home',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            component: () => import('./views/About.vue')
        }
    ]
})

Vue的路由有两种模式 hashhistory

hash模式对应的路由是类似于这个样子的 http://localhost:8080/#/about

也就是说对于搜索引擎来说所有的页面只有一个路径 就不利于搜索引擎索引

history模式对应的路由是这个样子的http://localhost:8080/about

嵌套路由

Home.vue

代码语言:javascript
复制
<div id="nav">
    <router-link to="/home/company">公司</router-link>
    <router-link to="/home/about">关于页</router-link>
</div>
<router-view/>

router.js

代码语言:javascript
复制
{
    path: '/home',
    name: 'home',
    component: Home,
    redirect: "/home/about",
    children: [
        {path: '/home/about', component: About},
        {path: '/home/company', component: Company}
    ]
}

redirect 用来跳转到home路由时 自动加载子路由

路由跳转

标签形式

代码语言:javascript
复制
<div id="nav">
    <router-link to="/home/company">公司</router-link>
    <router-link to="/home/about">关于页</router-link>
</div>
<router-view/>

JS形式

基本

代码语言:javascript
复制
// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

传参

代码语言:javascript
复制
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数,变成 /register?userId=123
router.push({ path: 'register', query: { userId: 123 }})

后两种对应的取值方式

代码语言:javascript
复制
this.$route.params.userId;

this.$route.query.userId;

路由回退

代码语言:javascript
复制
router.go(-1)

简单的SEO配置

首先把路由模式设置为history,再添加meta信息 添加后的配置如下

代码语言:javascript
复制
export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            name: 'login',
            component: Login,
            meta: {
                title: "登录",
                content: ""
            }
        },
        {
            path: '/home',
            name: 'home',
            component: Home,
            meta: {
                title: "主页",
                content: ""
            }
        },
        {
            path: '/about',
            name: 'about',
            meta: {
                title: "关于",
                content: ""
            },
            component: () => import('./views/About.vue')
        }
    ]
})

然后在main.js中添加

代码语言:javascript
复制
router.beforeEach((to, from, next) => {
    /* 路由发生变化修改页面meta */
    if (to.meta.content) {
        let head = document.getElementsByTagName('head');
        let meta = document.createElement('meta');
        meta.content = to.meta.content;
        head[0].appendChild(meta)
    }
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
        document.title = to.meta.title;
    }
    next()
});

注意上面的配置要放在创建Vue对象之前

代码语言:javascript
复制
new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app');

这样访问路由的时候 titlecontent 就会自动设置了

Vue-meta的使用

安装

代码语言:javascript
复制
npm install --save vue-meta

router.js中添加

代码语言:javascript
复制
import Router from 'vue-router'
import VueMeta from 'vue-meta'

Vue.use(Router);
Vue.use(VueMeta);

页面中

代码语言:javascript
复制
<script>
    export default {
        data() {
            return {
                mtitle: "登录"
            }
        },
        metaInfo: function () {
            return {
                title: this.mtitle,
                titleTemplate: '%s - 智慧课堂',
                htmlAttrs: {
                    lang: 'zh'
                },
                script: [{innerHTML: 'console.log("hello world!")', type: 'text/javascript'}],
                __dangerouslyDisableSanitizers: ['script']
            }
        }
    }
</script>

vue-meta 把引号做了转义处理,加入 __dangerouslyDisableSanitizers: ['script'] 后,就不会再对这些字符做转义了,该字段使用需慎重!

当然我们也可以在这里引用JS和CSS(不建议这样处理)

代码语言:javascript
复制
<script>
    export default {
        data() {
            return {
                mtitle: "登录"
            }
        },
        metaInfo: function () {
            return {
                title: this.mtitle,
                titleTemplate: '%s - 智慧课堂',
                htmlAttrs: {
                    lang: 'zh'
                },
                script: [
                    {innerHTML: 'console.log("hello hello!")', type: 'text/javascript'},
                    {src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', type: 'text/javascript'}
                ],
                __dangerouslyDisableSanitizers: ['script'],
                link: [
                    {
                        rel: "stylesheet",
                        type: "text/css",
                        href: "/css/reset.css"
                    }
                ]
            }
        }
    }
</script>

路由的渲染

如果我们的页面有嵌套路由的时候 页面渲染的时候会先渲染子路由对应的页面 导致如果子路由获取外层的高度的时候获取的一直是0,因为外层还未渲染 解决的方法就是:在父页面渲染后通知子页面获取

比如我用vuex保存外层的高度

代码语言:javascript
复制
export default new Vuex.Store({
    state: {
        content_height: '0'
    },
    mutations: {},
    actions: {}
});

添加公共的事件监听

代码语言:javascript
复制
var vue_event = new Vue();
window.vue_event = vue_event;

父页面

代码语言:javascript
复制
this.page_height = window.document.body.offsetHeight - this.$refs.header.offsetHeight - parseInt(getComputedStyle(this.$refs.main).marginBottom) - 2 + "px";
this.$store.state.content_height = parseInt(this.page_height);
vue_event.$emit('main_page_loaded', {});

子页面接收

代码语言:javascript
复制
mounted() {
    var _this = this;
    vue_event.$on("main_page_loaded", function (data) {
        _this.test_height = _this.$store.state.content_height - _this.$refs.test_title.offsetHeight - 24 + "px";
    });
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-12-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 简单路由
  • 嵌套路由
  • 路由跳转
    • 标签形式
      • JS形式
        • 路由回退
        • 简单的SEO配置
        • Vue-meta的使用
        • 路由的渲染
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档