router 根据URL分配到对应的处理程序
单应用页面，vue开发中只有一个一面
例如我们在开发移动端的时候，正常情况下底部的tab有四个选项：
首页 home
发现 find
订单 order
我的 my
针对于四个页面，是有四个组件作支撑
比如说我们在components中建立一个文件夹，建立四个组件，组件中都是
template script style 三个层分别创建好
当我们建立四个页面之后，就要去分析页面，作为底部tab导航他其实在四个页面中都存在，是不需要改变的，但是作为内容中心层，每个页面都不一样，我们可以把底部导航写入一个组件。新建一个NavBottom.vue作为底部导航公用部分.
NavBottom.vue
第一步：点击对面的进行页面跳转
路由中有两个属性，<router-link to="/home"> </router-link>,就相当于a链接,to就是跳转地址。
第二部：路由index.中配置，我们需要import引入，只需要在：
important Home from "@/components/Home"
important Find from "@/components/Find"
important Order from "@/components/Order"
important My from "@/components/My"
export derault new Router({
routes:[
{
path:"/home",
component:"Home"
},
{
path:"/find",
component:"Find"
},
{
path:"/order",
component:"Order"
},
{
path:"/my",
component:"My"
},
]
})
这时候，因为我们创建了底部导航组件，我们想要通过引入css来控制，而不是直接写在style中，我们可以通过一下方式解决问题：
在App.vue style中：
@import "./assets/path...."
如果想要样式对立起来，直接在style 标签中加入一个属性scoped就可以了。
如果我们点击不同的底部按钮，变换颜色，我们可以在NavBottom中写入一个.active样式，然后我们在router index.js中 导入linkActiveClass:"active", 我们切换就可以随意的变换颜色了。
注：我们平常在开发的过程中，尽量不要使用图片作为字体图标，我们可以直接使用ui框架中的字体图标就可以了。
全局的就在main.js 中引入，单个组件的引入就在相应的文件引入就行。