1. 安裝vue-router ``` npm install vue-router --save ``` 2. 在src目錄下新建router.js文件 3. 使用vue-router ``` import Vue from "vue" import Router from "vue-router" Vue.use(Router) export default new Router({ routes : [] }) ``` 4. 在main.js引入router.js文件,并掛載到vue原型上 ``` import router from "./router.js" new Vue({ router, render : h => h(App) }).$mount("#app") ``` 5. 在src目錄下創建pages文件夾 6. 在pages文件夾內新建login.vue組件 7. 在router.js文件內配置登錄組件的路由 ``` import Vue from "vue" import Router from "vue-router" Vue.use(Router) export default new Router({ routes : [ { path : "/login", name : "login", component : ()=> import("./pages/login.vue") } ] }) ``` 8. 在App.vue組件內使用router-view讓登錄頁面進行展示 ``` <template> <div id="app"> <router-view /> </div> </template> <style lang="scss"> </style> ```