用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>

 

然後運行代碼，完事。