1. 路由组件通常存放在```pages```文件夹，一般组件通常存放在```components```文件夹。
2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3. 每个组件都有自己的```$route```属性，里面存储着自己的路由信息。
4. 整个应用只有一个router，可以通过组件的```$router```属性获取到。
1. pages/About.vue
<template>
<h2>我是home的内容</h2>
</template>
<script>
export default {
name:'Home',
beforeDestroy(){
console.log("home组件即将被销毁了");
},
mounted(){
console.log("home组件挂载完毕了",this);
window.homeRoute=this.$route;
window.homeRouter=this.$router;
}
}
</script>
<style>
</style>
2. pages/About.vue
<template>
<h2>我是About的内容</h2>
</template>
<script>
export default {
name:'About',
beforeDestroy(){
console.log("about组件即将被销毁了");
},
mounted(){
console.log("about组件挂载完毕了",this);
window.aboutRoute=this.$route;
window.aboutRouter=this.$router;
}
}
</script>
<style>
</style>
3. router/index.js
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router"
import About from '../pages/About'
import Home from '../pages/Home'
// 创建并且暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
},
]
})
4. App.vue
<template>
<div>
<Banner></Banner>
<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">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!-- 指定组件的呈现位置-->
<!-- <h2>此处到底展示什么组件，得看用户点击哪个导航项</h2> -->
<!-- <router-view></router-view> -->
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Banner from './components/Banner.vue'
export default {
name: 'App',
components:{
Banner
}
}
</script>