vue-router的配置使用
# 前端路由特点
- 优点
- 体验好,快速呈现
- 缺点
- 不利SEO
- 使用浏览器的前进后退时回重新发送请求,没有合理利用缓存
- 单页面无法记住之前滚动的位置,无法在前进、后退的时候记住滚动的位置
# 基本使用
三个基本概念
- route:是一条路由,由这个英文单词也可以看出来,它是单数。Home按钮 => home内容, 这是一条route;about按钮 => about 内容, 这是另一条route
- routes:是一组路由,把上面的每一条路由组合起来,形成一个数组。[{home 按钮 =>home内容 }, { about按钮 => about 内容}]
- router:router是一个机制,相当于一个管理者,它来管理路由。当用户点击按钮的时候,router到routes中去查找对应的内容显示对应内容
- 客户端路由:dom元素的显示和隐藏。
- 两种实现方式
- hash
- html5 history api
# 实现途径
- 页面实现
- <router-link>和<router-view>对应点击和显示部分
- <router-link>定义页面中点击的部分
- <router-view>定义点击后匹配的内容显示在什么地方
- js配置
- 定义route,由path和component组成
- 创建router对路由进行管理
- router实例注入到 vue 根实例中
# 动态路由
把某种模式匹配到的所有路由,全部映射到同一个组件。例如,有一个User组件,对于所有ID各不相同的用户,都要用这个组件来渲染。那么,我们可以在vue-router的路由路径中使用【动态路径参数】
当使用路由参数时,例如从/user/foo导航到/user/bar,原来的组件实例会被复用。因为两个路由都渲染同一个组件,比起销毁再创建,复用则显得更加高效。这也意味着组件的生命周期钩子不会再被调用
# 嵌套路由
由我们的页面结构所决定.
当我们进入到home页面的时候,它下面还有分类,如手机系列,平板系列,电脑系列。当我们点击各个分类的时候,它还是需要路由到各个部分,如点击手机,它肯定到对应到手机的部分
vue 提供了childrens 属性,相当于我们所写的routes
# 命名路由
给路由加一个name 属性
使用:在router-link 中to 属性就可以使用对象
# 编程式路由
借助router的实例方法,通过编写代码实现
点击< router-link >时,这个方法会在内部调用,所以说,点击< router-link :to=”…”>等同于调用router.push(…)
this.$router.history.push('要跳转路由的地址')