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> ```