3 Vue-router
3.1 路由基础介绍
什么是前端路由?
- 路由根据不同的url地址展示不同的内容或页面
- 前端路由就是把不同路由对应的内容或者页面的任务交给前端来做,之前是通过服务器端根据url的不同返回不同页面实现的
什么时候使用前端路由?
- 在单页面应用,大部分页面结构不变,只改变部分内容的使用
前端路由有什么优点和缺点?
- 优点:用户体验好,不需要每次都从服务器全部获取,快速展现给用户
- 缺点:
- 不利于SEO
- 使用浏览器的前进、后退键的时候会重新发送请求,没有合理地利用缓存
- 单页面无法记住之前滚动的位置,无法在前进、后退的时候记住滚动的位置
路由重点
- vue-router用来构建SPA
- <router-link></router-link>或者this.$router.push({path:''})
- <router-view></router-view>
路由分类
- 动态路由匹配
- 嵌套路由
- 编程式路由
- 命名路由和命名视图
3.2 动态路由配置
什么是动态路由?
goods/:goodsId/user/:userName 必须符合路由规则
Vue-router其实就是对history的一个封装,history.go(0),history.back=history.go(-1)
url里面的#其实是默认使用的 hash 路由模式(index.js里的mode:'hash'),还可以用 history 路由模式。
@:别名的意思
3.3 嵌套路由
什么是嵌套路由?
路由嵌套路由,例如页面加载,菜单栏不动,内容变动。
3.4 编程式路由
什么是编程式路由?
通过js来实现页面的跳转
$router.push("name")
$router.push({path:"name"})
$router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123}})
$router.go(1)
3.5 命名路由和命名视图
什么是命名路由和命名视图?
给路由定义不同的名字,根据名字进行匹配
给不同的router-view定义名字,通过名字进行对应组件的渲染