vue底部导航栏点击切换页面

在Vue中，你可以使用Vue Router和组件来实现底部导航栏的点击切换页面功能。具体步骤如下：

1. 安装vue-router

npm install vue-router --save

2. 在main.js中引入并注册vue-router

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

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact
    }
  ]
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

3. 在组件中使用router-link和router-view

<template>
  <div>
    <router-view></router-view>
    <div class="nav">
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/contact">Contact</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

在以上代码中，我们通过router-link组件来创建底部导航栏，并使用to属性来指定路由路径。而router-view则是用来渲染当前路由所对应的组件。

这样，当我们点击底部导航栏的链接时，Vue Router会自动切换到对应的路由路径，并渲染对应的组件。