vue全栈商城项目-路由
根据不同的url地址展示不同的内容或页面,前端路由就是把不同路由对应不同的内容或页面的任务交给前端做,之前是通过服务端根据url不同返回不同的页面实现的。
什么时候使用?
在单页面应用,大部分页面结构不变,只改变部分内容的使用。
前端路由优缺点:
优点:用户体验好,不需要每次从服务器全部获取
缺点:1.不利于seo 2.使用浏览器前进后退的时候会重新请求,没有合理利用缓存
3.单页面无法记住之前滚动的位置,无法在前进后退时记住滚动条位置
动态路由:
router/index.js:
GoodsList.vue:
效果:
前端路由实际上是对history的封装 , 在控制台输入history.pushState("sss","ddd","/admin"):
传入goodsId:
嵌套路由:
注意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)
第一种方式、
第二种方式、
注意上图中接收参数的方式
命名路由:
传入cartId: