用vue-router实现选项卡

 

 

初学vue，使用vue-router实现选项卡，效果图如下：

         

 

思路为使用<router-view>和<router-link>来实现，顶部tab切换为一个模板，内容为一个模板。话不多说，直接撸代码：

第一步：创建几个模板，一个为顶部导航tabbar模板 top_view，其他几个为展示内容页模板：

第二步：确保你的项目已经使用了vue-cil 和vue-router, 安装方式为： 

npm install vue-router

   创建一个与main.js平级的js，取名为routers.js,在js中引入tabbar所要展示的内容页，并配置一下路由路径和映射路径：

   

   import Home from "./components/home"
   import News from "./components/news"
   const routers = [
     {
       path : '/home',  // 路由的路径
       name : 'home',
       component : Home  //  映射的路径
     },
     {
       path : '/news',  // 路由的路径
       name : 'news',
       component : News  //  映射的路径
     },
     {
       path: '/',
       redirect: '/home'
     }
   ]

   export default routers

    //  需要注意的是，export default routers 必须写在文件底部，而且后面还需要接一空行，否则无法通过 ESlint 语法验证

第三步：配置main.js，引入router并将router注入到vue对象中：

               

//  使用router来进行页面跳转
import VueRouter from "vue-router"
import routers from "./routers"

Vue.use(VueRouter);

//  配置router
const router = new VueRouter({
    mode : 'history',   //  如果不配置 mode，就会使用默认的 hash 模式，该模式下会将路径格式化为 #! 开头
    routes : routers
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

 第四步：在App.vue中引入头部的tabbar模板并使用：

    

import TopHeader from "./components/top_head"
export default {
  name: 'App',
  components: {
    TopHeader,
    footerView
  }
}

第五步：根据我们在router.js中设置的模板路由的路径（path),并结合router-link的to属性实现跳转：

  <li class="layui-nav-item layui-this"><router-link to="/home">首页</router-link></li>
  <li class="layui-nav-item"><router-link to="/news">产品</router-link></li>

 

然后运行代码，完事。