Vue + ElementUI 集成 Vue Router

最初发布于 szhshp的第三边境研究所, 转载请注明

最新写 Vue 项目使用 ElementUI 做前端, 然后需要集成一个 vue Router, 主要功能是侧边栏不刷新而内容刷新, 看了几个 starter 都和需求不太一样, 因此干脆自己搞一个

Installation - Element UI

直接用的 element-starter

Installation - Vue Router

npm install vue-router

main.js

Entry 文件里面要进行修改, 将 vueRouter 用作插件, 并且引用 routes

这里进行了: 将 App 渲染到 #app

    import Vue from 'vue'
    import VueRouter from 'vue-router'

    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import App from './App.vue'
    import routes from './routes'

    Vue.use(ElementUI)
    Vue.use(VueRouter);

    Vue.config.productionTip = false;

    const router = new VueRouter({ routes });

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

app.vue

这个文件的核心就是要放一个 <router-view>

    
 
 

    (...)

routes.js

    import Home from './components/Home.vue';
    import Tags from './components/Tags.vue';

    const routes = [
        { path: '/', component: Home },
        { path: '/tags', component: Tags },
    ];


    export default routes;

Home.vue

最后准备下几个不同的 components 即可, 下面是一个例子

    // Home.vue

    
 
 
    

源码

https://github.com/szhielelp/Vue-ElementUI-Router