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中
底部的选中样式可以看开发者工具后,选取样式去修改
所有评论(0)