Vue学习笔记进阶篇之vue-router安装及使用方法

<style>
#app {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
background-color: aliceblue;
}
</style>

同样的道理，我们要是想使用一个组件，导入和注册的步骤是少不了的。

导入：

import DemoHeader from './components/DemoHeader'
import DemoFooter from './components/DemoFooter'

注册：

 components: {
  DemoHeader,
  DemoFooter
 }

在上面的代码中我们又发现了个陌生标签<router-view>这个标签同样是vue-router的一个内部组件，实际上它是一个是一个 functional 组件。具体信息可以去官网router-viewAPI文档详细了解。它的作用就是渲染路由导航过来的组件，也就是这个标签内就是我们放置DemoHome, DemoAbout, DemoContact的地方。

因为它也是个组件，所以可以配合 <transition> 和 <keep-alive> 使用。如果两个结合一起用，要确保在内层使用 <keep-alive>, 添加上述两个标签后的template代码如下：

<template>
 <div id="app">
    <demo-header></demo-header>
    <transition name="fade" mode="out-in">
     <keep-alive>
      <router-view></router-view>
     </keep-alive>
    </transition>
    <demo-footer></demo-footer>
  </div>
</template>

再添加一个简单的淡入淡出的样式：

.fade-enter-active, .fade-leave-active{
 transition: all .3s;
}
.fade-enter, .fade-leave-to{
 opacity: 0;
}

通过上面的代码，我们发现之前学过的过渡这里都可以使用，可参考Vue学习笔记进阶篇——单元素过度

最后我们看下我们做了半天的成果吧：

首页

关于

联系方式