Vue-cli3如何添加路由（router）

之前使用的vue-cli2的是否可以在创建项目时直接引入vue-router，但是现在Vue-cli3新建项目后却少了很多东西，我们需要自己来安装使用路由。具体方案如下：

一、安装路由

yarn add  vue-router

二、创建router.js（与mian.js同级）
router.js中的内容为

import Vue from 'vue'
import Router from 'vue-router'
 
//组件模块
import Main from './components/content/main'
import Header from './components/header/header'
import Admin from './components/admin/admin'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    { path: '/', name: 'home', component: Main },
    { path: '/main', name: 'Main', component: Main },
    { path: '/header',  name: 'Header', component: Header},
    { path: '/admin',  name: 'Admin', component: Admin}
  ]
})

三、在main.js中添加如下内容

import Vue from "vue";
import dataLoader from "./utils/data/data.axios.util";
import {Button, Icon, Menu, Dropdown, Radio, Layout} from 'ant-design-vue';


import MainApp from "./main/main.app";
import router from "./router"

Vue.use(Button);
Vue.use(Icon);
Vue.use(Menu);
Vue.use(Dropdown);
Vue.use(Radio);
Vue.use(Layout);


Vue.config.productionTip = false;
Vue.prototype.$dataLoader = dataLoader;

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

四、使用
接下里就可以开始使用路由了，在需要使用路由的地方加入以下内容

主页     //切换到指定的组件
主页
管理页
        
  //组件显示的地方

也可通过事件的方法来使用路由

methods:{
  toMain() {
    this.$router.push('./main');  //跳转到指定组件
  },
 
  //使用路由返回上一级
  goBack() {
    window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
  },
}