vue-router学习

框架

浏览数:161

2019-3-31

AD:资源代下载服务

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 不建议使用该方法)