vue 项目添加vue-router

yarn add vue-router

新建router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
//自定义页面
import Home from './views/Home.vue'
//安装路由到vue
Vue.use(VueRouter)

const routes = [
    {path: '/', name: 'Home', component: Home},
    //路由的懒加载
    {path: '/about', name: 'About', component: () => import( './views/About.vue')},
]

const router = new VueRouter({
    //模式
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

 新建两个页面用于切换

 

配置router.js给当前工程

在main.js中添加以下两句话

 

import Vue from 'vue'
import App from './App.vue'
//全部引入
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUI);

//按需引入
import {Button, Radio, Select} from 'element-ui';
import router from './router.js'


Vue.component(Select.name, Select);
Vue.component(Radio.name, Radio);
Vue.use(Button)
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */


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

测试

选中第一个的时候

 第二个