vue路由
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。
我们以一个实例来说明:
现在有一个单页面应用有两个路径:/home和/about,与这两个路径对应的是两个组件Home和About。
- 创建组件
首先引入vue.js和vue-router.js:
然后创建两个组件构造器Home和About:
- 创建Router
3. 映射路由
调用router的map方法映射路由,每条路由以key-value的形式存在,key是路径,value是组件。
例如:’/home’是一条路由的key,它表示路径;{component: Home}则表示该条路由映射的组件。
4. 使用v-link指令
在a元素上使用v-link指令跳转到指定路径。
5. 使用标签
6. 启动路由
路由器的运行需要一个根组件,router.start(App, ‘#app’) 表示router会创建一个App实例,并且挂载到#app元素。
注意:使用vue-router的应用,不需要显式地创建Vue实例,而是调用start方法将根组件挂载到某个元素。
编写单页面的步骤
JavaScript
1.创建组件:创建单页面应用需要渲染的组件
2.创建路由:创建VueRouter实例
3.映射路由:调用VueRouter实例的map方法
4.启动路由:调用VueRouter实例的start方法
HTML
1.使用v-link指令
2.使用标签
router.redirect
应用在首次运行时右侧是一片空白,应用通常都会有一个首页,例如:Home页。
使用router.redirect方法将根路径重定向到/home路径:
router.redirect方法用于为路由器定义全局的重定向规则,全局的重定向会在匹配当前路径之前执行。
执行过程
当用户点击v-link指令元素时,我们可以大致猜想一下这中间发生了什么事情:
vue-router首先会去查找v-link指令的路由映射
然后根据路由映射找到匹配的组件
最后将组件渲染到标签
路由嵌套
嵌套路由是个常见的需求,假设用户能够通过路径/home/news和/home/message访问一些内容,一个路径映射一个组件,访问这两个路径也会分别渲染两个组件。
实现嵌套路由有两个要点:
在组件内部使用标签
在路由器对象中给组件定义子路由
钩子函数
1. vue实例的生命周期
通俗来说 vue的生命周期就是vue实例从创建到销毁的过程
2. 结合生命周期理解钩子函数
vue2.0提供了一系列钩子函数,这些函数和生命周期的各个阶段
3. 结合代码理解钩子函数’
(1)创建阶段
创建的标志点是New vue(),beforeCreate和created都发生在创建动作之后,但区别在于
beforeCreate触发的时候数据还没初始化和绑定,而created的时候就生成好了。
(2)挂载阶段
beforeMount和mounted两者主要区别在于模板是否编译和挂载了。
3)更新阶段
加载页面的时候,其实到mounted这里就结束了,更新和销毁并不会触发到。
控制台的结果:
我们可以看到,当我们去改变message的值的时候,触发了beforeUpdate函数,这个时候
e
l
的
值
已
经
更
改
了
,
但
是
d
o
m
并
没
有
变
动
。
到
u
p
d
a
t
e
的
时
候
,
才
真
正
去
更
新
d
o
m
结
构
。
(
4
)
销
毁
阶
段
控
制
台
的
结
果
:
可
以
发
现
b
e
f
o
r
e
D
e
s
t
o
r
y
和
d
e
s
t
o
r
y
e
d
打
印
出
来
的
结
果
并
没
有
什
么
特
别
,
e
l
的
值
d
a
t
a
的
数
据
依
然
在
的
。
这
是
因
为
el的值已经更改了,但是dom并没有变动。到update的时候,才真正去更新dom结构。 (4)销毁阶段 控制台的结果:可以发现beforeDestory和destoryed打印出来的结果并没有什么特别,el的值data的数据依然在的。这是因为
el的值已经更改了,但是dom并没有变动。到update的时候,才真正去更新dom结构。(4)销毁阶段控制台的结果:可以发现beforeDestory和destoryed打印出来的结果并没有什么特别,el的值data的数据依然在的。这是因为destroy只是销毁一个实例,清理它与其它实例的连接,解绑它的全部指令及事件监听器,并不会清除data的数据或者清除dom。
今天就写到这里吧