Vue回爐重造之router路由（更新中）

你好，我是Vam的金豆之路，可以叫我豆哥。2019年年度博客之星、技術領域博客專家。主要領域：前端開發。我的微信是 maomin9761，有什麼疑問可以加我哦，自己創建了一個微信技術交流羣，可以加我邀請你一起交流學習。最後自己也創建了一個微信公衆號：前端歷劫之路，歡迎關注。

---

歡迎閱讀本博文，本博文主要講述【Vue回爐重造之router路由】，文字通俗易懂，如有不妥，還請多多指正。

安裝vue-router

---

npm i vue-router -S

配置

---

1、創建文件夾與文件

創建一個router文件夾，在文件夾中創建兩個文件，分別是router.js和routes.js文件。

2、編輯文件

router.js（路由配置文件）

import Router from 'vue-router'
import routes from './routes'

export default ()=> {
    return new Router({
        routes,
        mode:'history',
        fallback:true //對於瀏覽器不支持history模式的，會自動轉成hash模式
    })
}

routes.js（路由頁面文件）

import Index from '../views/Index.vue'
import Login from '../views/Login.vue'

export default [
    {
        path: '/',
        component: Index
    },
    {
        path: '/login',
        component: Login
    }
]

main.js（Vue入口文件）

import Vue from 'vue'
import App from './App.vue'
import Router from 'vue-router'
import createRouter from './router/router'
Vue.use(Router)
Vue.config.productionTip = false

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

謝謝閱讀，如果覺得有感觸，麻煩幫忙點個贊，關個注吧！