vue路由定义

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 中引入，单个组件的引入就在相应的文件引入就行。