Vue 组件 和 路由

1.组件

组件与组件之间传递数据
vm实例中的data中的变量msg
组件自定义标签中绑定 :title=”msg”
组件配置中增加 props:[‘title’]

template: '<h1>{{title}}</h1>'

这样就设置好了组件

2.生命周期

指vue实例或者组件从开始到结束的每一个阶段

钩子函数
beforeCreate
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
created
在实例创建完成后被立即调用
beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用
该钩子在服务器端渲染期间不被调用
mounted
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
beforeUpdate
数据更新时调用
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
beforeDestroy
实例销毁之前调用
在这一步，实例仍然完全可用
destroyed
Vue 实例销毁后调用
调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

3.window.onhashchange

当浏览器地址栏的哈希值发生改变的时候触发

4.路由

单页应用
效率高，用户体验好
使用锚点决定显示哪个组件

<a href="#/aaa"></a>    hashchanged    location.hash

路由重定向 redirect
路由地址 ‘/xxx/:yyy’
this.#route.params.yyy
动态路由
定义路由组件
定义路由
实例化路由对象
props传值

5.侦听器

1.监听data中定义的属性

watch：｛    msg：function（new,old）{} //当msg变化就会触发函数｝

没有return值，不会缓存数据

2.监听路由对象$route