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

vue 项目添加vue-router_vue.js

 新建两个页面用于切换

vue 项目添加vue-router_elementui_02

 

<template>
  <div id="app">
    About
  </div>
</template>

<script>
export default {
  name: "About"
}
</script>

<style>

</style>
<template>
  <div id="app">
    Home
  </div>
</template>

<script>
export default {
  name: "Home"
}
</script>

<style>

</style>

配置router.js给当前工程

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

vue 项目添加vue-router_App_03

 

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')

测试

<template>
  <div id="app">
    <nav>
      <router-link to="/">去Home组件</router-link> |
      <router-link to="/about">去About组件</router-link>
    </nav>
    <router-view/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: '1'
    };
  }
}

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

选中第一个的时候

vue 项目添加vue-router_App_04

 第二个

vue 项目添加vue-router_Vue_05