vue全栈商城项目-路由

根据不同的url地址展示不同的内容或页面,前端路由就是把不同路由对应不同的内容或页面的任务交给前端做,之前是通过服务端根据url不同返回不同的页面实现的。
什么时候使用?
在单页面应用,大部分页面结构不变,只改变部分内容的使用。
前端路由优缺点:
优点:用户体验好,不需要每次从服务器全部获取
缺点:1.不利于seo 2.使用浏览器前进后退的时候会重新请求,没有合理利用缓存
3.单页面无法记住之前滚动的位置,无法在前进后退时记住滚动条位置

动态路由:

vue全栈商城项目-路由

router/index.js:

vue全栈商城项目-路由

GoodsList.vue:

vue全栈商城项目-路由

效果:

vue全栈商城项目-路由

前端路由实际上是对history的封装 , 在控制台输入history.pushState("sss","ddd","/admin"):

vue全栈商城项目-路由

传入goodsId:

vue全栈商城项目-路由

vue全栈商城项目-路由

vue全栈商城项目-路由

嵌套路由:

vue全栈商城项目-路由
vue全栈商城项目-路由

vue全栈商城项目-路由

注意router-link里的to="/goods/title",跟router/index里不写前面的goods有区别。

编程式路由:通过js来实现页面的跳转:

$router.push("name")

$router.push({path:"name"})

$router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123}})

$router.go(1)或$router.go(-1) 

第一种方式、

vue全栈商城项目-路由

vue全栈商城项目-路由

第二种方式、

vue全栈商城项目-路由

vue全栈商城项目-路由

注意上图中接收参数的方式

vue全栈商城项目-路由

命名路由:

vue全栈商城项目-路由

vue全栈商城项目-路由

vue全栈商城项目-路由

vue全栈商城项目-路由

传入cartId:

vue全栈商城项目-路由

vue全栈商城项目-路由

vue全栈商城项目-路由