vue-router总结
来源:互联网 发布:素颜美女知乎 编辑:程序博客网 时间:2024/05/21 01:57
路由的用法
知识点
router-link
- 在HTML5 history模式下使用了base选项,所有to属性可以不用写基路径
- 会拦击点击事件,不会重新加载页面.
- router-link默认渲染为a标签,我们可以通过tag属性设置为别的标签(常用的li).
to属性可以绑定name(命名组件),query(带查询参数)
router-view
- router-view: 渲染匹配到的视图组件,router-view匹配到的视图组件里面还可以嵌套自己的router-view.根据嵌套路径(children)来继续渲染.
- router-view可以通过name属性来渲染对应的component下相应的组件
router-view可以配合transition与keep-alive使用,如果同时使用,里面要使用keep-alive.
路由信息对象
一个 route object(路由信息对象) 表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息,还有 URL 匹配到的 route records(路由记录)
route object 是 immutable(不可变) 的,每次成功的导航后都会产生一个新的对象。
路由的滚动行为:当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样.(这个功能只在 HTML5history 模式下可用)
产生路由信息对象的行为
$route.path: 字符串,对应当前路由的路径,总是解析为绝对路径,如 “/foo/bar”。
$route.params: 一个 key/value 对象,包含了 动态片段 和 全匹配片段,如果没有路由参数,就是一个空对象。
route.query:一个key/value对象,表示URL查询参数。例如,对于路径/foo?user=1,则有route.query:一个key/value对象,表示URL查询参数。例如,对于路径/foo?user=1,则有route.query.user == 1,如果没有查询参数,则是个空对象。
$route.hash: 当前路由的 hash 值 (带 #) ,如果没有 hash 值,则为空字符串。
$route.fullPath: 完成解析后的 URL,包含查询参数和 hash 的完整路径
$route.matched:一个数组,包含当前路由的所有嵌套路径片段的 路由记录 (包含children下路径)。
$route.name: 当前路由的名称
Router的构造配置: router配置.
mode: 默认值为’hash’,可选值: “hash” | “history” | “abstract”.
base: 默认值为’/‘,表示应用的基路径.如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 “/app/“
linkActiveClass: 默认值: “router-link-active”,
scrollBehavior方法
导航钩子
导购钩子:用来拦截导航,让它完成跳转或取消.有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的。
router实例
router.app: 配置了 router 的 Vue 根实例。
router.mode: 路由使用的 模式。
route.currentRoute: 当前路由对应的 路由信息对象.
route.beforeEach(guard)
route.push() 跳转路由,会向 history 栈添加一个新的记录
route.replace(): 它不会向 history 添加新记录,替换掉当前的 history 记录。
等价于:<router-link :to="..." replace>
route.Go(n):在 history 记录中向前或者后退多少(n)步.类似 window.history.go(n)
route.back()
- route.forward()
异步加载
把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件.
// AMD风格component: resolve => require(['登录路径.vue'],resolve)
- vue-router总结
- vue-router总结
- Vue-router总结
- vue-router总结
- vue-router 知识总结
- vue-router总结
- vue-router使用总结
- Vue-Router总结
- vue-router
- vue-router
- vue-router
- vue-router
- Vue router
- vue-router
- vue-router
- vue-router
- vue-router
- vue-router
- 关于MyEclipse下的项目无法使用BASE64Encoder问题的解决办法
- 解决Java调用https服务证书错误javax.net.ssl.SSLHandshakeException
- Dominos<并查集求解>
- boot中的命令行解析器
- c++设计模式之单例模式
- vue-router总结
- Q123:PBRT-V3,各种形式的“光传播方程”的推导依据
- Java常识 ------分支语句(for do---while while语句)
- ConstraintLayout属性详解和Chain的使用
- JvavScript与java中的正则表达式的区别
- JS设置cookie、读取cookie、删除cookie
- C# 获取CPU ID(本机)
- [Leetcode] 293. Flip Game 解题报告
- 文章标题