一、路由的介绍
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
基础部分
进阶部分