Vue07.pdf
需积分: 5 201 浏览量
2022-09-06
09:00:33
上传
评论
收藏 849KB PDF 举报
Vue07
Vue07
复习
复习
路由系统: 路 径的变化 让页面 局部 发生变更, 营造出一种页面切换的效果
SPA : S ingle P age A pplication 单页应用 -- 一个页面, 局部切换, 实现整个网站
router-view : 占位符
例如: 用1本书之类 放在桌子上占位, 人来了以后 再换成真人
根据路径的变化, 切换占位符对应的组件
views文件夹:
专门存储配合路由使用的组件
router/index.js : 路由配置文件
path: 路径, 要求 / 开头
新传参方式: 使用 : 来代表参数, 例如: /about/:title/:nid
props: 代表使用开启组件的 props 接收路由参数功能, 默认 false 不开启
component:组件
普通加载: 在最上方 import, 然后再用
适合使用频繁的组件, 例如 首页
懒加载: 适合不频繁的页面组件
利用 ()=> import() 使用时再临时调用箭头函数
name: 为这段路由关系起名 --- 调试用
meta: 元数据, 存放用户自定义的数据
路由守卫:
路由前置守卫: beforeEach 可以在路由跳转之前触发
to: 要前往的路由信息
from: 当前所在的路由信息
next: 放行, 调用 next() 才能解开当前守卫拦截器, 让路由继续进行
router-link
标签式跳转: 本质是对 a 标签进行了封装
<router-link to="/路径"
特点:
跳转时, 不会重载当前网页
自带激活样式
router-link-active: 模糊匹配, 所有的父级路径全都带此样式
router-link-exact-active: 精确匹配, 只有当前项激活样式
编程式跳转: 通过代码触发跳转
$router: 整个路由对象, 包含路由的所有操作 和 信息
push: 推入新的页面
$route: 为了便于用户使用, 把 $router 中 currentRoute 属性抽离出来
当前路由的信息
路由参数:
旧
to='/路径?参数=值&参数=值'
读取: $route.query.参数名
新
到配置文件中配置: /路径/:a/:b/:c
to="/路径/11/哈/家乐"
剩余10页未读，继续阅读
评论0
最新资源