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'}">苹果🍎</router-link><br/><br/><br/>
    <router-link :to="{ name:'Grape'}">葡萄🍇</router-link><br/><br/><br/>
    <router-view></router-view>
  </div>
</template>

当我们访问

http://localhost:8080/#/Fruits/Apple
http://localhost:8080/#/Fruits/Grape

就会更改组件里面<router-view></router-view>的容

but当我们访问

http://localhost:8080/#/Fruits

的时候<router-view></router-view>是没用内容的(T_T)

解决方法

{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits,
  children: [
    {
      path:'',
      component: Strawberry
    },
    {
      path: 'Apple',
      name: 'Apple',
      component: Apple
    },
    {
      path: 'Grape',
      name: 'Grape',
      component: Grape
    },
  ]
}

没错加一个空的path，这时候访问

http://localhost:8080/#/Fruits

<router-view></router-view>就会显示Strawberry组件的内容(●ˇ∀ˇ●)

3.编程式的导航

除了使用<router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

router.push(location, onComplete?, onAbort?)

注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 时，这个方法会在内部调用，所以说，点击 等同于调用 router.push(...)。

声明式	编程式
<router-link :to="...">	router.push(...)

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

同样的规则也适用于 router-link 组件的 to 属性。

router.replace(location, onComplete?, onAbort?)

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录

声明式	编程式
<router-link :to="..." replace>	router.replace(...)

router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

4.命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

路由

{
  path: '/user/:userId',
  name: 'user',
  component: User
}

用法

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
或者
router.push({ name: 'user', params: { userId: 123 }})

5.命名视图

首先来定义页面

<template>
  <div id="app">
    <router-view/>
    <router-view name="fruits"/>
    <router-view name="animal"/>
  </div>
</template>

路由

{
  path: '/',
  components: {
    default: Food, // 默认视图
    fruits:Pineapple,
    animal:Cat
  }
}

当我们访问路由

http://localhost:8081/#/

的时候，会渲染视图对应的组件

嵌套命名视图

定义Food组件

<template>
  我是Food
  <router-view/>
  <router-view name="animal"/>
</template>

定义路由

{
  path: '/',
  component: Food,
  children: [
    {
      path: 'Milk',
      component: Milk
    },
    {
      path: 'Cat',
      components: {
        default: Fish,
        animal: Cat
      }
    }
  ]
}

访问路由

http://localhost:8081/#/Milk
// 渲染对应的 Milk 组件

http://localhost:8081/#/Cat
// 渲染对应的 Fish、Cat 组件

有时候我们项目会有一个始终存在的导航栏，但是呢，登录页又不需要，这时候就可以使用命名视图

6.重定向和别名

重定向（redirect）

路由

{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits,
  redirect: '/Fruits/Apple'
  children: [
    {
      path: 'Apple',
      name: 'Apple',
      component: Apple
    },
    {
      path: 'Grape',
      name: 'Grape',
      component: Grape
    },
  ]
}

当我们访问

http://localhost:8080/#/Fruits

的时候，对自动跳转到

http://localhost:8080/#/Fruits/Apple

注意！！！

上面有写到

{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits,
  children: [
    {
      path:'',
      component: Strawberry
    },
    {
      path: 'Apple',
      name: 'Apple',
      component: Apple
    },
    {
      path: 'Grape',
      name: 'Grape',
      component: Grape
    }
  ]
},

其中

{
  path:'',
  component: Strawberry
}
// 不会改变路由，只是会把<router-view/>默认显示到Strawberry组件

redirect: '/Fruits/Apple'
// 会改变路由到Apple

是不一样的

重定向的目标也可以是一个命名的路由

{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits,
  redirect: {name: 'Apple'},
  children: [
    {
      path: 'Apple',
      name: 'Apple',
      component: Apple
    },
    {
      path: 'Grape',
      name: 'Grape',
      component: Grape
    },
  ]
}

当我们访问

http://localhost:8080/#/Fruits

的时候，对自动跳转到

http://localhost:8080/#/Fruits/Apple

甚至是一个方法，动态返回重定向目标

{ 
  path: '/Fruits', 
  redirect: to => {
  // 方法接收 目标路由 作为参数
  // return 重定向的 字符串路径/路径对象
  }
}

这个就不细讲了，感兴趣的可以看这里呦

别名（alias）

/Fruits 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /Fruits，就像用户访问 /Fruits 一样

{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits,
  alias: '/b'
}

当访问

http://localhost:8080/#/b

实际上是访问的

http://localhost:8080/#/Fruits

但地址是不会变成/Fruits

当然它也有高级的玩法，感兴趣的可以看这里呦

7.路由组件传参

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

使用 props 将组件和路由解耦

路由

{
  path: '/BookDetails/:book_id',
  name: 'BookDetails',
  component: BookDetails,
  props: true
}

BookDetails组件

<template>
  <div class="book-details">
    {{book_id}}
  </div>
</template>

<script>
export default {
  props: ['book_id'],
  data () {
    return {
    }
  }
}
</script>

布尔模式

在路由配置中设置 props: true 时默认将 $route.params 数据传给组件，组件需要通过自身的 props 属性取出 params 中的属性

对象模式

如果 props 是一个对象，其下所有属性均会被传入组件。需要注意的是当 props 必须是是静态的

路由

{
  path: '/BookDetails/:book_id',
  name: 'BookDetails',
  component: BookDetails,
  props: {
    name: 'lucky',
    id: 7
  }
}

BookDetails组件

<template>
  <div class="book-details">
    {{name + id}}
  </div>
</template>

<script>
export default {
  props: ['name', 'id'],
  data () {
    return {
    }
  }
}
</script>

函数模式

路由

{
  path: '/BookDetails',
  name: 'BookDetails',
  component: BookDetails,
  props: (route) => ({ book_id: route.query.book_id })
}

父组件

<template>
  <div class="book">
    <button @click="goRouter">函数模式</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods:{
    goRouter(){
      this.$router.push({path: 'BookDetails', query: {book_id: 999}})
    },
  }
}
</script>

没错它也有高级的玩法，感兴趣的可以看这里呦

8.HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

路由

export default new Router({
  mode: 'history',
  routes: [...]
})

来看一下用之前和用之后的地址(～￣▽￣)～

// hash
http://localhost:8080/#/
http://localhost:8080/#/BookDetails/1

// history
http://localhost:8080/
http://localhost:8080/BookDetails/1

emmmmmmmmm 好看了。。。 (✿◕‿◕✿)

but

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/BookDetails/id 就会返回 404，这就不好看了

啊哈，后台怎么配置呢？自己去看吧，我不知道(～￣▽￣)～

vue Router——进阶篇

Vue Router

Vue Router Api