一、页面搭建
1.BannerPage的构建---头页面
<template>
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header">
<h2>Vue Router Demo</h2>
</div>
</div>
</template>
<script>
export default({
name:'BannerPage'
})
</script>
<style scoped>
div{
background: linear-gradient(30deg,red,orange,yellow,skyblue,purple);
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
text-align: center;
font-size: 30px;
margin-top: 0;
padding-top: 0;
}
</style>
2.HomePage的搭建及其中嵌套的Message和News的页面搭建,通过route封装的router-link来引入,通过router-view来展示分别组件
<template>
<div>
<h2>我是Home的内容</h2>
<hr />
<!-- 1.定义路由链接-->
<div>
<ul class="nav nav-tabs">
<li>
<router-link class="list-group-item" active-class="active" to="/news">News</router-link>
</li>
<li>
<router-link class="list-group-item" active-class="active" to="/message">Message</router-link>
</li>
</ul>
<router-view></router-view>
</div>
<!-- 2.功能展示 -->
<div>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: "HomePage",
data() {
return {};
},
};
</script>
<style scoped>
div {
background: linear-gradient(50deg, yellow, pink, orange, yellow);
width: 100%;
height: 200px;
}
</style>
二、js文件的编写
每个路由路径下都必须编写一个类似于index.js这样的文件,这样才能映射组件,使用route。同时在你的Vue项目的main.js的文件中要导入这个router的index.js才能实行引入
//index.js的编写
//1.导入Vue和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'
//引入组件
import AboutPage from './AboutPage'
import MessagePage from './MessagePage'
import NewsPage from './NewsPage'
import HomePage from './HomePage'
//2.调用Vue.use()函数,把VueRouter 安装为Vue的插件
Vue.use(VueRouter)
// //3.创建路由的实例对象
// const router = new VueRouter()
//创建并暴露一个路由器
export default new VueRouter({
routes: [
{
path:'/about',
component:AboutPage
},
{
path:'/message',
component:MessagePage
},
{
path:'/news',
component:NewsPage
},
{
path:'/home',
component:HomePage
}
]
})
//main.js中的修改
// 引入Vue
import Vue from 'vue'
//引入App组件,它是所有组件的父组件
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './components/router/MulRouter/index'
//关闭vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)
// new Vue({
// render: h => h(App),
// }).$mount('#app')
new Vue({
el:'#app',
//render函数完成该功能:将app组件放入容器中
render:h=>h(App),
router:router
})
三、app.vue中的编写
每个Vue项目中都包含一个app.vue这是项目中的主界面,所有的页面都需要在这里来运行
<template>
<div>
<div class="row">
<banner-page></banner-page>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!-- 原始html中使用a标签实现页面的跳转 -->
<!-- <a class="list-group-item active" href="./about.html">About</a> -->
<!-- <a class="list-group-item" href="./home.html">Home</a> -->
<!-- Vue中借助router-link标签实现路由的切换 -->
<router-link class="list-group-item" active-class="active" to="/about">AboutPage</router-link>
<router-link class="list-group-item" active-class="active" to="/home">HomePage</router-link>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!-- 指定组件的呈现位置 -->
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import BannerPage from './components/router/MulRouter/BannerPage.vue'
export default {
name:'App',
components:{
BannerPage
}
}
</script>