vue - router（路由）

一、路由的介绍

        vue-router 实现vue中路由管理（切换）， 简单点组件之间的跳转。

二、路由的安装和使用

1、万能公式

        1)、了解

        2)、下载

        3)、使用：import 引入，配置、使用

2、vue-router的安装 

        1)、vue create 项目名

        2)、直接选中vue-router（直接就配置成功）

两个标签：

        router-link：类似于a标签，to属性相当于a标签当中的href

        router-view：容器，用于显示跳转的组件

项目构建工具：gulp、grunt、webpack（重点）

三、传参

1、字符串传参

<router-link to="'/productDetail?id=6">
<router-link :to="'/productDetail?id='+item.id">

this.$route.query.名称
{{$route.query.名称}}

2、对象传参

        get：

<router-link :to="{path:'/productDetail',query:{id:item.id}}">
    {{item.productName}}
</router-link>

        post：必须使用路由的name来进行跳转

<router-link :to="{name:'ProductDetail',params:{id:item.id}}">
    {{item.productName}}
</router-link>

this.$route.params.名称
{{$route.params.名称}}

3、rest方式传参

        步骤一：路由设置，path参数    /path/:参数名

        步骤二：:to="'/productDetail/'+item.id"    //拼接中路由传递的格式

        步骤三：接收

this.$route.params.名称
{{$route.params.名称}}

  扩展：route 与 router的区别

        route：具体某个路由

        router：整体的路由对象 

四、vue-router的官方api

        基础部分

        进阶部分