普通页面使用vue.js心得

在写本文之前要问自己几个问题，来说明为什么要这么做：

 

为什么在html中使用vue.js?

　　vue.js已经趋于成熟，个人感觉比jquery要好用的多，但是在node环境下使用vue.js不用使用ssr后端渲染的情况下seo并不友好，所以就想着在html直接引用vue.js当做jquery使用。

为什么不使用ssr后端渲染？

　　因为本人搞后台开发使用的是java，所以要想ssr必须使用nodejs作为服务端，所以我并没有太多时间学习nodejs

所以最后决定在后台使用thymeleaf模板引擎中使用vue.js，我做的是一个博客系统，我从入行开始就想有一个属于自己的博客，但是当时时间和技术都是非常有限的，所以一直没有把这件事提上日程，今年是我第二年工作，感觉学习的技术足可以做一个简单的博客了，本人博客园也会围绕我自己搭建的个人博客遇到的问题展开技术的分享，下一篇介绍我的来历还有我的经历，如果有人看见的话希望我们可以交流技术可以互相学习，好了废话不多说，我要解决的问题是，博客的导航栏的复用，就是头部导航栏点中的话就高亮，就要实现这么一个简单的问题。

　　使用的技术：

　　　　　　vue.js模板、element 导航栏

本人没有写过太多博客，所以博客的排版可能不太好，请您原谅，这个坑不适用于nodejs下的vue开发，因为那个环境下是单页应用，我只是当成jq来用的，所以可能不太规范，请您谅解。

要解决的问题：

　　复用导航栏，而且有选中高亮。

实现的效果：

　　

切换tab

 

 

最终效果就是这样，切换后自动选中，不是在每个页面都写一遍导航栏，那样太难维护了！

代码：

// 定义一个名为 his-header 的新组件
vue.component('his-header', {
    data: function () {
        return {
            index: 0
        }
    },
    props: ['indexs'],
    template: '<el-menu :default-active="index" class="el-menu-demo" mode="horizontal"><li class="el-menu-item index" style="margin-left: 20%;"><h2><a href="/">起码网</a></h2></li><el-menu-item index="1"><a href="/">首页</a></el-menu-item><el-menu-item index="2"><a href="/resource">建站教程</a></el-menu-item><el-menu-item index="3"><a href="/resource">应用中心</a></el-menu-item><el-menu-item index="4"><a href="https://www.ele.me" target="_blank">资源分享</a></el-menu-item><el-menu-item index="5"><a href="https://www.ele.me" target="_blank">随笔杂谈</a></el-menu-item><el-menu-item index="6"><a href="/about">关于我</a></el-menu-item></el-menu>',
    mounted: function () {//创建完模板以后再赋值让element 选中菜单
        this.index = this.indexs;
    }
})

<his-header v-bind:indexs="1"></his-header>

<his-header v-bind:indexs="2"></his-header>

在每个页面只要使用这样的标签就可以实现了！