最新写 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>

<template>
    <el-container>
    <router-view></router-view>
    </el-container>
</template>

(...)

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

<template>
    <div>
        Home
    </div>
</template>
<script>
export default {
    
}
</script>

源码

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

  • 文章标题: 《Vue + ElementUI 集成 Vue Router》
  • 发布日期: 2019-04-28
  • 文章分类: Tech
  • 相关标签: 3DS