完整代码

好的，这里提供一个完整的代码示例，包括页面路由配置和底部导航栏组件的实现。代码如下：

<!-- App.vue -->
<template>
  <div>
    <router-view />
    <tab-bar />
  </div>
</template>

<script>
import TabBar from "@/components/TabBar.vue";

export default {
  components: {
    TabBar
  }
};
</script>

<!-- Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<!-- Search.vue -->
<template>
  <div>
    <h1>Search Page</h1>
  </div>
</template>

<!-- Friends.vue -->
<template>
  <div>
    <h1>Friends Page</h1>
  </div>
</template>

<!-- Setting.vue -->
<template>
  <div>
    <h1>Setting Page</h1>
  </div>
</template>

// router.js
import Vue from "vue";
import VueRouter from "vue-router";

import Home from "@/views/Home.vue";
import Search from "@/views/Search.vue";
import Friends from "@/views/Friends.vue";
import Setting from "@/views/Setting.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: "/home"
  },
  {
    path: "/home",
    name: "Home",
    component: Home
  },
  {
    path: "/search",
    name: "Search",
    component: Search
  },
  {
    path: "/friends",
    name: "Friends",
    component: Friends
  },
  {
    path: "/setting",
    name: "Setting",
    component: Setting
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

<!-- TabBar.vue -->
<template>
  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o" :to="{ path: '/home' }">首页</van-tabbar-item>
    <van-tabbar-item icon="search" :to="{ path: '/search' }">搜索</van-tabbar-item>
    <van-tabbar-item icon="friends-o" :to="{ path: '/friends' }">朋友</van-tabbar-item>
    <van-tabbar-item icon="setting-o" :to="{ path: '/setting' }">设置</van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  data() {
    return {
      active: 0
    };
  }
};
</script>

在以上代码中，App.vue 是项目的根组件，包含了页面路由视图和底部导航栏组件 TabBar。在 router.js 中定义了页面路由配置，包括四个页面（Home、Search、Friends、Setting）。在 TabBar.vue 中使用 vant 的 Tabbar 组件实现了底部导航栏。通过设置 icon 和路由，即可实现页面之间的跳转。其中，v-model="active" 表示当前选中的导航栏的索引，通过该值来控制选中状态。

希望以上代码示例可以帮助到你。