min.js

import Vue from 'vue'

import App from './App.vue' import VueRouter from 'vue-router' import Home from './components/Home' import Case from './components/Case' import Me from './components/Me'

Vue.use(VueRouter)

const routes = [

    {path: '/',component: Home},//注意这里一定不能加s，否则报错     {path: '/case',component: Case},     {path: '/me',component: Me},     {path: '*',redirect: '/'}//防输错或者没找到页面路由错误，跳转到首页 ]

const router = new VueRouter ({

    routes,     mode: 'history' })

Vue.config.productionTip = false

new Vue({

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

 

app.vue

<template>

  <div id="app">         <div class="container">             <app-header></app-header>         </div>         <div class="container">             <router-view></router-view><!-- 点了哪个组件，哪个组件就会展示到哪里来 -->         </div>   </div> </template>

<script>

import Header from './components/Header'

export default {   name: 'app',   components: {     "app-header": Header  //appHeader: Header   } } </script>

<style>

#app {   font-family: 'Avenir', Helvetica, Arial, sans-serif;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;   text-align: center;   color: #2c3e50;   margin-top: 60px; } </style>  

 

header.vue

<template>

    <header>         <nav class="navbar navbar-expand-lg navbar-ligth bg-light">             <ul class="navbar-nav">                 <li><router-link tag="div" to="/" class="nav-link">首页</router-link></li>                 <!-- <li><router-link :to="homeLink" class="nav-link">首页</router-link></li> -->                 <!-- tag可以修改标签名 -->                 <!-- to可以绑定动态的地址 -->                 <li><router-link to="case" class="nav-link">案例</router-link></li>

                <li><router-link to="me" class="nav-link">我的</router-link></li>

            </ul>         </nav>     </header> </template>

<script>

    export default{         data(){             return {                 homeLink: './'             }         }     } </script>

<style>

    .router-link-exact-active{         color: #333     } </style>

 

 

 

 

 

 

创建底部tab组件

在main.js使用并注册路由，并且设置好三个子组件的path路径

安装路由 npm install vue-router --save

具体在组件中使用router-link to 指到刚才设置好的path路径中去

 

接着在app.vue中引入组件，三个子组件的页面会渲染到router-view中

 

底部的选中样式可以看开发者工具后，选取样式去修改