vue路由——基础篇（二）

上一篇内容我们主要了解了路由的基本用法，从本篇开始我们深入了解一下路由。

动态路由匹配

在开发中，我们经常需要把匹配某种模式的路由映射到同一个组件，例如有一个 User 组件用于显示用户信息，对于不同ID 的用户，都使用这个组件渲染。这就需要我们动态的对路由进行匹配，我们通过冒号:标记动态路由部分，例如 ursr/:id，user/1、user/2和user/sss

首先修改App.vue文件

<template><div id="app"><div id="nav"><router-link to="/book/1">百年孤独</router-link> |<router-link to="/book/2">麦田里的守望者</router-link></div><router-view/></div>
</template>

然后在目录src/view下添加Book.vue文件

<template><div><table><tr><th>图书编号</th><th>图书名称</th><th>图书作者</th><th>图书简介</th></tr><tr><td>{{ $route.params.id }} &emsp;</td><td>{{ book[$route.params.id - 1].title }} &nbsp;</td><td class="author">{{ book[$route.params.id - 1].author }} &emsp;</td><td>{{ book[$route.params.id - 1].content }}</td></tr></table></div>
</template>
<style>
.author {color: red;
}
</style>
<script>
export default {data() {return {book: [{id: 1,title: "麦田里的守望者",content:"塞林格将故事的起止局限于16岁的中学生霍尔顿·考尔菲德从离开学校到纽约游荡的三天时间内，并借鉴了意识流天马行空的写作方法，充分探索了一个十几岁少年的内心世界。",author: "【美】杰罗姆·大卫·塞林格",},{id: 2,title: "百年孤独",content:"作品描写了布恩迪亚家族七代人的传奇故事，以及加勒比海沿岸小镇马孔多的百年兴衰，反映了拉丁美洲一个世纪以来风云变幻的历史。",author: "加西亚·马尔克斯",},],};},
};
</script>

最后修改路由文件src/router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Book from '../views/Book.vue';
Vue.use(VueRouter);const routes = [{path: '/book/:id',component: Book,
}];const router = new VueRouter({routes,
});export default router;

这样我们是使用了动态路由匹配，在代码中我们使用了$route.params，这个是路由对象的属性，表示一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。

查询参数

如果我们在URL地址上添加参数，根据参数的不同来确定显示的内容不同。
修改App.vue文件，需要修改之后的代码如下：

<router-link to="/book?id=1">百年孤独</router-link>
<router-link to="/book?id=2">麦田里的守望者</router-link>

修改路由文件src/router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Book from '../views/Book.vue';
Vue.use(VueRouter);const routes = [{path: '/book',component: Book,
}];const router = new VueRouter({routes,
});export default router;

修改Book.vue组件

<td>{{ $route.query.id }} &emsp;</td>
<td>{{ book[$route.query.id - 1].title }} &nbsp;</td><td class="author">{{ book[$route.query.id - 1].author }} &emsp;</td>
<td>{{ book[$route.query.id - 1].content }}</td>

我们可以通过路由对象中的 query属性查询参数， query属性表示一个 key/value 对象，表示 URL 查询参数。如果没有查询参数，则是个空对象。

通配符匹配

常规参数只会匹配被 /分隔的 URL 片段中的字符。如果想匹配任意路径，我们可以使用通配符 ( *)：

{// 会匹配所有路径path: '*'
}
{// 会匹配以 `/user-` 开头的任意路径path: '/user-*'
}

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

当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分。

// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

路由对象是表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录 (route records)。路由对象出现在多个地方：

在组件内，即 this.$route
在 $route 观察者回调内
router.match(location) 的返回值
导航守卫的参数
scrollBehavior 方法的参数

上面五种地方我们现在就了解了第一个，其他的我们后续会慢慢讲解。

路由对象中的属性：

$route.path：字符串，对应当前路由的路径，总是解析为绝对路径，如 “/foo/bar”。
$route.params：一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
$route.query：一个 key/value 对象，表示 URL 查询参数，如果没有查询参数，则是个空对象。
$route.hash：当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。
$route.fullPath：完成解析后的 URL，包含查询参数和 hash 的完整路径。
$route.matched：一个数组，包含当前路由的所有嵌套路径片段的路由记录。路由记录就是 routes 配置数组中的对象副本
$route.name：当前路由的名称，如果有的话
$route.redirectedFrom：如果存在重定向，即为重定向来源的路由的名字