一.vue-router原理
1.遇到的问题
(1)获悉url的变化
(2)页面要更新渲染新内容
(3)不离开当前页面
2.解决思路
(1)利用hash(超链接后加#)，hash变的时候url其实是不变的 监听hashchange事件，把路由与配置匹配，把对应的组件作为参数调用render方法渲染到vouter-view的位置上，
必备基础知识
(2)利用h5提供的historyAPI,url变化，但不跳转 必备基础知识
- 路由事件window.onpopstate
- 路由方法History API
二.vuex原理
1.视图和storage实例需要双向数据传递
(1)首先storage实例提供state存储数据，视图可以通过state.xxx访问数据。视图通过commit(t)、dispatch(t)方法更新数据，所以实例中有commit和dispatch方法通过参数找到对应的mutation和action同步和异步改变state中的数据。
(2)state中数据变化需要同步render到视图，所以数据需要是响应式的，使用vue即可，所以vuex和vue是强耦合的
三.实现前的准备
1.vue-plugin
3.vue.util.defineReactive/new Vue({data(){return{}}})
4.Es6 class
四.开始实现
1.vue-router
回顾：
使用vue-router四步
(1)使用vue-router插件
import Router from 'vue-router'
Vue.use(Router)
(2)创建Router实例
export default new Router({...})
(3)在根组件上添加该实例
import router from './router'
new Vue({
router,
}).$mount("#app");
(4)添加路由视图
<router-view></router-view>
- 导航
<router-link to="/">Home</router-link>
或
this.$router.push('/')
思考：
(1)vue.use(router)中到底做了些什么
(2)为什么在配置项中加入router实例
(3)router-view的作用
(4)跳转如何实现内容更新，页面不刷新
实现：
必备基础知识
