vue-router学习笔记

一、前端路由

      路由是根据不同的url地址显示不同的内容或页面
      前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务器根据url的不同返回不同的页面实现的；
      在单页面应用中，只有一个页面，其它页面都是模拟出来的，并非实实在在存在的，所有的路由都需要前端自己来构建，所以引入前端路由；

二、什么时候使用前端路由

在单页面应用中，大部分页面结构不变，只改变部分内容的使用；

三、前端路由有什么优点和缺点？

      优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户；
      缺点：不利于SEO；
                 使用浏览器的前进，后退键的时候，后退键的时候会重新发送请求，没有合理地利用缓存；
                 单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置；

四、vue-router用来构建SPA

<router-link></router-link>   // 或者this.$router.push({path:}

<router-view></router-view> // 路由被放置的地方

五、动态路由匹配

/user/:username/post/:post_id  // 模式
/user/evan/post/123 // 匹配路径
{username:'evan',post_id:123} // $route.params
// 动态路由的具体写法，路由文件中
{
   path: '/device/control_auth/:cert',
   component: controlAuth,
   meta: {
      title: '中控鉴权'
  }
 },
// js中data部分的写法
cert: this.$route.params.cert,
// 路径的写法
./ // 当前目录
../ // 上级目录

// 另外一种路由写法
{ // 路由中的写法
    path: '/coupon/promotion',
    component: receiveCoupon,
    meta: {
       title: '领取优惠券'
  }
}
// js中data部分的写法
publicityCode: this.$route.query.publicityCode

原理：对BOM对象的history进行了封装

history.go(1) // 前往下一个页面
history.go(-1) // 前往上一个页面
history.pushState("desc",“test”,"/admin") // 第一个参数为页面的描述，第二个为页面的标题，第三个为页面的地址

路由模式：mode

mode:'history' // 使用url的方式加载地址信息
mode:'hash'  // 默认使用哈希方法，地址栏有#号

六、嵌套路由

// 路由文件中
routes: [{
    path: '/goods', // 父路由
    name: 'GoodsList',
    component: GoodsList,
    children: [{ // 子路由
      path: '/title',
      name: 'title',
      component: Title
    },
    {
      path: '/img',
      name: 'img',
      component: Image
    }]
  }]

// 同时需要在父文件相关位置定义router-link和router-view
<div>
  这是一个页面
  <router-link to="/title">显示商品标题</router-link>
  <router-link to="/img">显示商品图片</router-link>
  <div>
    <router-view></router-view>
  </div>
</div>

七、编程式路由

通过js来实现页面的跳转：
1）$router.push("name")
2）$router.push({path:"name"})
3）$router.push({path:"name?a=123})
或者$router.push({path:"name",query:{a:123}})
4）$router.go(1)

// 四种编程式路由
<button @click="jump">button - 跳转到购物车页面</button>
jump() {
  this.$router.push('/cart')
  this.$router.push({path: '/cart'})
  this.$router.push({path: '/cart?goodsId=123'})
  this.$router.go(-2)
}

// 获取goodsId
<div class="">
  我是购物车组件
  <span>{{ $route.query.goodsId }}</span>
</div>

八、命名路由和命名视图

1）命名路由：给路由定义不同的名字，根据名字进行匹配

// 路由写法
{
    path: '/cart/:cartId',
    name: 'cart', // 此处必须有
    component: Cart
  }

// html写法
<div>
  <router-link :to="{name:'cart',params:{cartId:123}}">跳转到购物车页面</router-link>
</div>

2）命名视图：给不同的router-view定义名字，通过名字进行对应组件的渲染

// App文件中
<div id="app">
  <router-view class="main"></router-view>
  <router-view class="left" name="title"></router-view>
  <router-view class="right" name="img"></router-view>
</div>

// css文件
.left,.right
  float left
  width 49%
  border 1px solid gray

// router文件
routes: [{
      path: '/',
      name: 'GoodsList',
      components: {
        default: GoodsList,
        title: Title,
        img: Image
      }
    },
    {
      path: '/cart/:cartId',
      name: 'cart',
      component: Cart
    }]

显示结果：

屏幕快照 2018-07-23 下午10.44.49.png

九、动态向url传递参数

// 动态向url传递
getCoachList() {
    return new Promise((resolve, reject) => { 
        let occupationType = ''
        if(this.occupationType != 'all'){
          occupationType += `?occupationType=${this.occupationType}`
        }
        this.$axios.get(`${api_host}/lego/manage/coach/arrangement/overview${occupationType}`).then(res => {
          let data = res.data.data
          this.arrangementStatuses = data.arrangementStatuses
          this.manageDayArrangements = data.manageDayArrangements
          this.weekStartDate = moment(data.weekStartDate)
          this.arrangementStatuses.forEach(() => {
            this.isHighlighted.push(false)
          })
          // console.log(this.isHighlighted)
          resolve(resolve)
        }).catch(err => {
          reject(err)
        })
   })
}

十、dependencies和devDependencies

dependencies // 上线时要使用的依赖
devDependencies // 开发时使用的依赖