对于一个完整的站点，有网站展示页面和后台页面。通常，网站展示页面的头部，底部是公共的，中间部分根据需要进行填充。而后台有顶部，侧边菜单，以及底部实现。这个和网站展示页又有所不同。那么，想进行公共部分的抽离，我们就需要定义自己的模板。也就是 layout。
我们先去看看文档： https://router.vuejs.org/zh/installation.html
我们先完成第一阶段的部署： https://blog.vini123.com/525
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
某些时候，在一些全局的场景中。我们可能会对某个特殊路由进行处理。这个时候，路由的变化就很有用了。来变变变。
// 监听,当路由发生变化的时候执行
watch:{
$route(to,from){
console.log(to.path);
}
}
watch: {
$route: {
handler: function(val, oldVal){
console.log(val);
},
// 深度观察监听
deep: true
}
},
使用本地图片，本来是可以直接使用的。可，如果是动态的话，常规的方式是不行了。比如，根据某个数据，动态的渲染本地的图片直接来就不行。那终究是有方法的。
假如我们的图片存放在 src/assets/image/icons/ 下，有很多张，都是以 png 图片。
常规的使用。
<div>
<img src="@/assets/image/icons/love.png" alt="love" />
</div>
这样就可以了。可如果是下边这样的情形呢。
使用 vue，一般都会使用到 vuex（状态管理）和路由（vue router）还有 axios 的。可见 vuex 是多么重要。
vuex 干啥呢。 说到 vuex ，都会带上状态管理。对，就是状态管理。它用来存储响应组件里的状态。我们经常会用到 v-model, 数据变化了，对应的渲染也跟着变化了。可 v-model 是小的玩意，是在当前组件中使用的。vuex 是全局的，对应着整个完整的项目。
想象一下这样的场景。我人在登录页面。使用登录，登录成功，并返回到上一个路由。在返回到上一个路由中，没做任何的数据请求，但是在上一个路由的对应的 ui 界面上，已经显示出了用户的头像昵称这些信息。这是什么鬼，这就是状态管理所带来的影响。
跨组件，跨路由，及时响应。数据驱动渲染。
还有，vuex 中的数据是暂时的。所谓暂时，是指在当前的浏览器里（刷新浏览器就没了），在当前使用的小程序里（小程序手动处理掉进程再进来就没了）。但暂时是能跨越组件和路由噢。上边就已经说过。可及时是暂时的，也是有方法使其长久。
怎么使其长久呢。我们可以使用 cookie，可以使用 localStorage 来搞定。
好了，到此仅仅是文字上说明 vuex 能干啥。下边就落地吧。
继续阅读
以前用 jquery ，实现有限的内容的无缝滚动蛮方便。vue 也一样方便。来喵喵。
完整的动画，经历了下边几个阶段：