路由

33 阅读1分钟

1、生命周期函数 created:分为三个阶段 初始化阶段(准备数据和dom渲染) 运行阶段(数据变化,视图更新) 销毁阶段

钩子: beforecreate 初始化之前,还不能进行数据操作 created 可以操作数据(比如 发请求,获取后台数据,更新组件数据) beforemount 页面渲染还没有完成,无法获取dom mounted 页面渲染完成,可以获取dom(最早从这里可以操作dom)

2、路由:路径和组件之间的映射关系 views 是页面组件,供路由切换 components为复用组件

vue-router是vue官方提供的一个插件,用于处理路由

3、 vue-router的基本使用(5+2)

(1)下载vue-router

(2)在main.js中引入VueRouter函数

(3)添加到Vue.use()身上

(4)创建路由对象

(5)将路由对象注入到new vue 实例中

两个核心步骤:配置路由规则 指定路由出口 router-view

4、在src下面建一个router文件夹专门存放路由。然后按照路由基本使用前五步建好路由,再导出路由,之后只需要在需要的地方引入路由即可

image.png

5、router-link 实现a标签的高亮。标签内部会自带类,将该类的样式改变即可自定义样式

image.png

6、查询参数传值

image.png

动态路由传值

image.png