Vue路由以及SEO配置

码客说

发布于 2019-10-22 17:12:34

1.4K0

发布于 2019-10-22 17:12:34

文章被收录于专栏：码客

简单路由

默认的路由配置是这样的

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的路由有两种模式 hash 和 history

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

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

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

嵌套路由

Home.vue

<div id="nav">
    <router-link to="/home/company">公司</router-link>
    <router-link to="/home/about">关于页</router-link>
</div>
<router-view/>

router.js

{
    path: '/home',
    name: 'home',
    component: Home,
    redirect: "/home/about",
    children: [
        {path: '/home/about', component: About},
        {path: '/home/company', component: Company}
    ]
}

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

路由跳转

标签形式

<div id="nav">
    <router-link to="/home/company">公司</router-link>
    <router-link to="/home/about">关于页</router-link>
</div>
<router-view/>

JS形式

基本

// 字符串
router.push('home')

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

传参

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

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

后两种对应的取值方式

this.$route.params.userId;

this.$route.query.userId;

路由回退

router.go(-1)

简单的SEO配置

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

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中添加

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对象之前

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app');

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

Vue-meta的使用

安装

npm install --save vue-meta

router.js中添加

import Router from 'vue-router'
import VueMeta from 'vue-meta'

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

页面中

<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(不建议这样处理)

<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保存外层的高度

export default new Vuex.Store({
    state: {
        content_height: '0'
    },
    mutations: {},
    actions: {}
});

添加公共的事件监听

var vue_event = new Vue();
window.vue_event = vue_event;

父页面

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', {});

子页面接收

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 删除

html