四种回调函数：
定时器 事件 ajax vue钩子函数
router原理：监听页面的hash值
router模式：
1.hash 页面跳转时有#号
2.history 页面跳转时没有#号， 服务器上限发送请求时使用
路由重定向：
重定向只是修改路径， 还需要单独去设置路由匹配规则
{
path: '/',
/*
(1)重定向只是修改页面路径。 输入 / 会重定向到 /find
(2)只有component才会让vue去寻找路由匹配页面。所以设置了重定向，还需要单独设置匹配规则
*/
redirect: "/find"
}
路由声明式导航
查询参数两个流程
1. 传递参数: <router-link to="/friend?name=张三&age=20">朋友</router-link>
2. 跳转后的组件接收参数:
<li>这是当前页面 query 接收到的参数:
<span>姓名：{
{ $route.query.name }}</span> --
<span>年龄：{
{ $route.query.age }}</span>
</li>
路径参数三个流程
1.定义路由规则:
{ path: '/friend',name: 'friend',component: friend},
{ path: '/friend/:name/:age',name: 'friend',component: friend},
2.传递参数:
<router-link to="/friend/李四/30">朋友</router-link>
3.跳转后的组件接收参数:
<li>这是当前页面 params 接收到的参数:
<span>姓名：{
{ $route.params.name }}</span> --
<span>年龄：{
{ $route.params.age }}</span>
</li>
路由的编程式导航
query传参两个步骤
1.跳转传参
this.$router.push({path:'/路径',query:{参数名：参数值}})
2.接收
<li>这是当前页面 query 接收到的参数:
<span>姓名：{
{ $route.query.name }}</span> --
<span>年龄：{
{ $route.query.age }}</span>
</li>
params传参三个步骤
优点：参数值不在路径中显示，通过内存传递，刷新后参数值没有了，保密性比较好
1.路由规则添加路由名
{ path: '/friend', name: 'friend', component: friend },
2.跳转传参
this.$router.push({ name: '路由名', params: { 参数名: '参数值' }})
3.跳转后的组件接收参数: this.$route.params.参数名
<li>这是当前页面 params 接收到的参数:
<span>姓名：{
{ $route.params.name }}</span>
<span>年龄：{
{ $route.params.age }}</span>
</li>