vue——router简介

vue-router是vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。
传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换

基础

1.动态路由匹配

定义路由

export default new router({
  routes: [
    {
      path: '/bookdetails/:book_id',
      name: 'bookdetails',
      component: bookdetails
    },
    {
      path: '/bookdetails/user/:username/book/:book_id',
      name: 'bookdetailstwo',
      component: bookdetailstwo
    },
  ]
})

页面

<template>
  <div class="book">
    <router-link :to="{ name:'bookdetails',params: { book_id: 1}}">跳转书籍详情\^o^/</router-link><br/><br/><br/>
    <router-link :to="{ name:'bookdetailstwo',params: { book_id: 1,username: '小嘟嘟'}}">跳转高级书籍详情┗|｀o′|┛</router-link>
  </div>
</template>

桥豆麻袋(～￣▽￣)～，对<router-link>感兴趣的可以去看 ,或者的博客，然后go on

点击跳转后的路由

http://localhost:8080/#/bookdetails/1
http://localhost:8080/#/bookdetailstwo/user/小嘟嘟/book/1

跳转的页面接收路由参数（以第二个跳转为例）

<template>
  <div>
    <div>人员姓名：{{$route.params.username }}</div>
    <div>书籍id：{{$route.params.book_id }}</div>
  </div>
</template>

1-1响应路由参数的变化

提醒一下，当使用路由参数时，例如从 /bookdetails/1 导航到 /bookdetails/2，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

bookdetails组件

<template>
  <div class="book-details">
    <div>书籍详情 id：{{ $route.params.book_id }}</div><br/><br/>
    <router-link :to="{ name:'bookdetails',params: { book_id: 2}}">自己跳自己o(*￣▽￣*)ブ</router-link>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  created(){
    console.log('进入图书详情~~~')
  }
}
</script>

当从父页面跳转过来时会执行生命周期，当点击组件里‘自己跳自己’时，并不会触发生命周期

当然有解决方法，还是两种(●ˇ∀ˇ●)

方法一（使用watch (监测变化) $route 对象）

bookdetails组件

<template>
  <div class="book-details">
    <div>书籍详情 id：{{ $route.params.book_id }}</div><br/><br/>
    <router-link :to="{ name:'bookdetails',params: { book_id: 2}}">自己跳自己o(*￣▽￣*)ブ</router-link>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  created(){
    console.log('进入图书详情~~~')
  },
  watch:{
    '$route'(to, from) {
      console.log(to ,from, '路由监听')
    }
  }
}
</script>

方法二（使用beforerouteupdate 导航守卫）

bookdetails组件

<template>
  <div class="book-details">
    <div>书籍详情 id：{{ $route.params.book_id }}</div><br/><br/>
    <router-link :to="{ name:'bookdetails',params: { book_id: 2}}">自己跳自己o(*￣▽￣*)ブ</router-link>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  created(){
    console.log('进入图书详情~~~')
  },
  beforerouteupdate(to, from, next){
    console.log(to, from, next,'导航守卫')
  },
  watch:{
    '$route'(to, from) {
      console.log(to ,from, '路由监听')
    }
  }
}
</script>

注意！！！使用beforerouteupdate后watch不会生效

1-2捕获所有路由或 404 not found 路由

在上面定义好的路由最后面添加新的路由

{
  path: '/fruits*',
  name: 'fruitsbanana',
  component: fruitsbanana
},
{
  path: '*',
  name: 'notfound',
  component: notfound
}

当使用通配符路由时，请确保路由的顺序是正确的，也就是说含有通配符的路由应该放在最后。路由 { path: '*' } 通常用于客户端 404 错误

当我们输入路由

http://localhost:8080/#/fruitsapple

会匹配到‘/fruits*’，所以会跳转到fruitsbanana组件

再次输入路由

http://localhost:8080/#/iamveryhappy

这时候就会匹配到 ‘*’，自然就进入到了写好的404页面(～￣▽￣)～

1-3高级匹配模式

vue-router 使用 path-to-regexp 作为路径匹配引擎，所以支持很多高级的匹配模式，例如：可选的动态路径参数、匹配零个或多个、一个或多个，甚至是自定义正则匹配。

举个栗子(～￣▽￣)～

// 第一种（通过？的使用可以将参数变为可选项）
{
  path: '/pathtoregexp/:id?',
  name: 'pathtoregexp',
  component: pathtoregexp
}


//第二种（使用正则，只匹配id是数字）
{
  path: '/pathtoregexp/:id(\\d+)',
  name: 'pathtoregexp',
  component: pathtoregexp
}

1-4匹配优先级

有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

定义路由

{
  path: '/fruits*',
  name: 'fruitsbanana',
  component: fruitsbanana
},
{
  path: '/fruits*',
  name: 'fruitspear',
  component: fruitspear
}

如上面所示，谁先定义的，谁的优先级就最高，只要匹配成功，就会进入到fruitsbanana组件

2.嵌套路由

vue会自带一个是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套

呐，现在来改变一下路由

{
  path: '/fruits',
  name: 'fruits',
  component: fruits,
  children: [
    {
      path: 'apple',
      name: 'apple',
      component: apple
    },
    {
      path: 'grape',
      name: 'grape',
      component: grape
    },
  ]
}

组件

<template> <div> 我是水果页面<br/><br/><br/> <router-link :to="{ name:'apple'}">苹果