vue 之配置路由 和 layout布局

配置路由

router/index.js

• 基础的路由配置
• 还有登录权限的配置

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [{
  path: "/login",
  name: "Login",
  component: () => import("../views/login/Login.vue")
}, {
  path: "/",
  name: "Layout",
  component: () => import("../views/layout/index.vue"),
  children: [{
    //默认 显示home组件
    path: "",
    name: "Home",
    component: () => import("../views/home/Home.vue")
  }, {
    path: "/home",
    name: "Home",
    component: () => import("../views/home/Home.vue")
  },
    {
    path: "/qa",
    name: "Qa",
    component: () => import("../views/qa/Qa.vue")
  }, {
    path: "/video",
    name: "Video",
    component: () => import("../views/video/Video.vue")
  }, {
    path: "/me",
    name: "Me",
    component: () => import("../views/me/me.vue")
  }
  ]
}]

const router = new VueRouter({
  routes
})

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

export default router

layout/index.js

• 在view 下创建 layout 文件 这个是用于布局的文件
• 然后引入 设置路由的显示 和 tabber
• 刷新后，还想高亮之前的tab中的item

<template>
  <div class="layout-container">
    <!-- 子路由出口 -->
    <router-view />

    <!-- 底部导航栏 -->
    <van-tabbar v-model="active">
      <van-tabbar-item v-for="item in tabbar" @click="goto(item.path)" :key="item.path"  :icon="item.icon">{{ item.text }}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
  import Vue from 'vue';
  import {
    Tabbar,
    TabbarItem
  } from 'vant';

  Vue.use(Tabbar);
  Vue.use(TabbarItem);

  export default {
    name: 'Layout',
    data() {
      return {
        active: 0,
        tabbar:[
          {
            path:"/home",
            text:"首页",
            icon:"home-o"
          },
            {
            path:"/qa",
            text:"问答",
            icon:"search"
          },
          {
            path:"/video",
            text:"视频",
            icon:"volume-o"
          },          {
            path:"/me",
            text:"我的",
            icon:"friends-o"
          }
        ]
      };
    },
    created(){
      this.tabbar.map((item,idx) =>{
        if(item.path === this.$route.path){
           this.active = idx;
        }
      })
    },
    methods: {
      goto(path){
        this.$router.push(path)
      }
    },
    components: {},
  }
</script>
<style lang="scss" scoped>
</style>

router/index.js

	{
		path: '/',
		redirect: '/XXX',
	},
 {
    path: "/",
    name: "Layout",
    component: () => import("../views/layout/index.vue"),
    children: [{
        //默认 显示home组件
        path: "",
      name: "Home",
      meta:{
        keepalive:true
      },
        component: () => import("../views/home/Home.vue")
      }, {
        path: "/home",
        name: "Home",
        component: () => import("../views/home/Home.vue")
      },
      {
        path: "/qa",
        name: "Qa",
        component: () => import("../views/qa/Qa.vue")
      }, {
        path: "/video",
        name: "Video",
        component: () => import("../views/video/Video.vue")
      }, {
        path: "/me",
        name: "Me",
        component: () => import("../views/me/me.vue")
      }
    ]
  },

• 骚操作
  控制底下的tabbar是否显示