vue-router运用步骤(本教程并不周全，只研讨到了本人够用的水平，假如还想要深切相识路由，请在vue router 文档中进修)：

• 手动：

  1. npm 装置 vue-router npm install vue-router

  2. 设置路由

     1. 在main.js同级目次下（目次构造不一定要和我完整一样）新建router.js；
     2. 在router.js中援用vue 和 vue-router 并 用vue.use（）在vue中运用该插件
         import vue from  "vue"
         import router from "vue-router"
         vue.use(router)
     3. 引入须要设置的页面（可选）
         import Home from "./views/Home.vue"
     4. 在router.js中设置路由
         1. 路由设置花样
             let routers = [
                 {
                     path:"/",
                     name:"home", //可选
                     component:Home //已引入可以用这中要领
                 },
                 {
                     path:"/about",
                     name:"about", //可选
                     component:()=> import("./views/About.vue")  
                             //没有提早引入的页面可以用该要领引入
                 }
             ]
         2. 实例化该设置
             export default new router({
                 routers
             })

  3. 在main.js中运用该router实例

     1. 引入实例 `import router from "./router"`
     1. 运用该实例 
         new Vue({
             ......
             router,
             ......
         })

  4. 在页面顶用 <router-view></router-view> 来安排路由展现部份的html

  5. 在页面中运用路由

         <router-link to="/home"></router-link>
         // “/home”要与 routers中的path一致

• vue ui 辅佐 （初学者不发起运用该要领）

  1. 在vue ui 插件页面右上角点击增加vue-router
  2. 高枕无忧
• 分外知识点
  npm 运行时 假如main.js的vue实例中没有 render 设置项则须要在vue.config.js文件中分外设置 runtimeCompiler 设置项为 true。（这个设置项设置为true后会使得项目终究打包文件大10kb 不发起运用该要领）