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

之前使用的vue-cli2的是否可以在創建項目時直接引入vue-router，但是現在Vue-cli3新建項目后卻少了很多東西，我們需要自己來安裝使用路由。具體方案如下：

安裝路由

npm install vue-router

創建router.js與main.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中添加如下內容

 

接下里就可以開始使用路由了，在需要使用路由的地方加入以下內容

<router-link to="/">主頁</router-link>     //切換到指定的組件
<router-link to="/main">主頁</router-link>
<router-link to="/admin">管理頁</router-link>
        
<router-view/>  //組件顯示的地方

 

也可通過事件的方法來使用路由

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