vue-router的传参方式及声明方式

四种回调函数：

定时器  事件  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>