vue Router——基础篇

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: '/BookDetailsTwo/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,'导航守卫')
    next()
  },
  watch:{
    '$route'(to, from) {
      console.log(to ,from, '路由监听')
    }
  }
}
</script>

注意！！！用beforeRouteUpdate记得要写next()，否则不会跳转路由

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'}">苹果