Vue2学习之第七章——vue-router与ElementUI组件库
在Vue2中使用vue-router和ElementUI可以通过以下步骤进行:
- 安装vue-router和ElementUI:
npm install vue-router element-ui --save
- 在main.js中引入vue-router和ElementUI,并配置路由:
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'
// 使用ElementUI
Vue.use(ElementUI)
// 定义路由组件
import Home from './components/Home.vue'
import About from './components/About.vue'
// 定义路由
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About },
{ path: '*', redirect: '/home' }
]
// 创建路由实例
const router = new VueRouter({
routes // (缩写)相当于 routes: routes
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
- 在App.vue中使用vue-router和ElementUI组件:
<template>
<div id="app">
<el-button @click="goHome">Home</el-button>
<el-button @click="goAbout">About</el-button>
<router-view></router-view>
</div>
</template>
<script>
export default {
methods: {
goHome() {
this.$router.push('/home');
},
goAbout() {
this.$router.push('/about');
}
}
}
</script>
- 创建Home.vue和About.vue组件,并在这些组件中使用ElementUI组件。
以上代码提供了一个简单的示例,展示了如何在Vue2项目中集成vue-router和ElementUI。这将有助于理解如何设置路由和使用ElementUI组件库。
评论已关闭