关于Vue的路由多层基本使用

一、页面搭建

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>&nbsp;&nbsp;&nbsp;&nbsp;
          <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>