1.前端路由的优缺点:
优点:
用户体验好,不需要每次都从服务器全部获取,快速展现给用户
缺点:
1)不利于SEO;
2)使用浏览器的前进,后退键的时候会从新发送请求,没有合理的利用缓存;
3)单页面无法记住之前滚动的位置,无法在前进,后退的时候记住滚动的位置;
2.vue-router 的几种基础形式
A.动态路由匹配
{ path:"/goods/:id", name:"GoodsList", component:"../page/goodslist" } // 获取路由参数 this.$route.params.id
B.嵌套式路由
{ path:"/goods", name:"GoodsList", component:"../page/goodslist", children:[ { path:"title", name:"title", component:"../page/title", } ] } // 实现跳转 <router-link to="/goods/title"> 跳转到标题页面 </router-link>
C.编程式路由
// 通过JS来实现页面的跳转 1) $router.push("name"); 2) $router.push({path:"name"}); 3) $router.push({path:"name?id=123"}) 或者 $router.push({path:"name",query:{id:123}}); 4) $router.go(1); // 获取路由参数 this.$route.query.id // 实现跳转 <button @click = "jump"></button> jump(){ this.$router.push({path:'title',query:{id:123}}) }
D.命名路由和命名视图
// 命名路由 { path:"/goods/:id", name:"GoodsList", component:"../page/goodslist" } <router-link :to="{name:'cart',params:{id:123}}"> 跳转到标题页面 </router-link> // 命名视图 { path:"/", name:"GoodsList", components:{ default:"../page/goodslist", title:"../page/title", img:"../page/img" } } <router-view></router-view> <router-view name="title"></router-view> <router-view name="img"></router-view>