介绍

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。
本文是基于上一篇文章（Vue学习笔记进阶篇——vue-cli安装及介绍）vue-cli脚手架工具的。

安装

在终端通过cd命令进入到上一篇文章中创建的my-demo1项目目录里，然后使用以下命令进行安装:

 
  1. npm install vue-router --save

--save参数的作用是在我们的包配置文件package.json文件中添加对应的配置。安装成功后， 可以查看package.json文件，你会发现多了"vue-router": "^2.7.0"的配置。如下：

 
  1.   "dependencies": {
  2.     "vue": "^2.3.3",
  3.     "vue-router": "^2.7.0"
  4.   },

使用

通过以上步骤，我们已经安装好了vue-router，但是在vue-cli中我们如何使用呢？
首先，我们需要在main.js文件中导入并注册vue-router:

 
  1. //ES6语法导入
  2. import VueRouter from 'vue-router'
  3. //注册
  4. Vue.use(VueRouter)

然后便是实例化：

 
  1. const router = new VueRouter({
  2.   mode: 'history',
  3.   routes:[
  4.     {path: '/', component:DemoHome},
  5.     {path: '/about', component:DemoAbout},
  6.     {path: '/contact', component:DemoContact}
  7.   ]
  8. })

path: 是路由的路径。
component: 是该路由需要渲染的组件。
上面代码中的DemoHome, DemoAbout, DemoContact都是单文件组件，所以我们同样需要创建上面三个组件，并导入到当前文件。这三个组件我们只是作为示例来使用，所以比较简单，代码分别如下:

  • DemoHome.vue:
 
  1. <template>
  2.   <div id="home">
  3.     <h2>this is home</h2>
  4.   </div>
  5. </template>
  7. <script>
  8.   export default({
  9.     name:'home'
  10.   })
  11. </script>
  13. <style scoped>
  14.   #home{
  15.     width: 100%;
  16.     height: 500px;
  17.     background-color: khaki;
  18.   }
  19. </style>
  • DemoAbout.vue:
 
  1. <template>
  2.   <div id="about">
  3.     <h2>this is about</h2>
  4.   </div>
  5. </template>
  7. <script>
  8.   export default({
  9.     name:'about'
  10.   })
  11. </script>
  13. <style scoped>
  14. #about{
  15.   width: 100%;
  16.   height: 500px;
  17.   background-color: antiquewhite;
  18. }
  19. </style>
  • DemoContact.vue:
 
  1. <template>
  2.   <div id="contact">
  3.     <h2>this is contact</h2>
  4.   </div>
  5. </template>
  7. <script>
  8.   export default({
  9.     name:'contact'
  10.   })
  11. </script>
  13. <style scoped>
  14.   #contact{
  15.     width: 100%;
  16.     height: 500px;
  17.     background-color: lightskyblue;
  18.   }
  19. </style>

创建好以上组件后，再使用ES6语法导入到main.js:

 
  1. import DemoHome from './components/DemoHome'
  2. import DemoAbout from './components/DemoAbout'
  3. import DemoContact from './components/DemoContact'

最后在Vue实例中加入路由属性就可以了

 
  1. new Vue({
  2.   el: '#app',
  3.   router,
  4.   template: '<App/>',
  5.   components: { App }
  6. })

完整的main.js应该是这样：

 
  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3. import App from './App'
  4. import DemoHome from './components/DemoHome'
  5. import DemoAbout from './components/DemoAbout'
  6. import DemoContact from './components/DemoContact'
  8. Vue.use(VueRouter)
  10. Vue.config.productionTip = false
  12. const router = new VueRouter({
  13.   mode: 'history',
  14.   routes:[
  15.     {path: '/', component:DemoHome},
  16.     {path: '/about', component:DemoAbout},
  17.     {path: '/contact', component:DemoContact}
  18.   ]
  19. })
  20. /* eslint-disable no-new */
  21. new Vue({
  22.   el: '#app',
  23.   router,
  24.   template: '<App/>',
  25.   components: { App }
  26. })

在这里我们为了学习，所以我们简单的做个布局。接下来，我会再创建两个组件，一个叫DemoHeader, 一个叫DemoFooter。DemoHeader里面我放一个logo的图片，和导航，而这个导航的路由也将会使用我们前面定义的路由；DemoFooter就比较简单了，放一些footer信息。
下面我们看下这两个组件的代码：

  • DemoHeader.vue:
 
  1. <template>
  2.   <div id="header" class="wrap">
  3.     <div class="header">
  4.       <h1 class="logo">
  5.         <router-link to="/">
  6.           <img src="../assets/logo.png" alt="">
  7.         </router-link>
  8.       </h1>
  9.     </div>
  10.     <div class="top-nav">
  11.       <div id="navList" class="navlist-wrap">
  12.         <div class="navlist clearfix">
  13.           <span class="nav-btn">
  14.             <router-link to="/">首页</router-link>
  15.           </span>
  16.           <span class="nav-btn">
  17.             <router-link to="/about">关于</router-link>
  18.           </span>
  19.           <span class="nav-btn">
  20.             <router-link to="/contact">联系方式</router-link>
  21.           </span>
  22.         </div>
  23.       </div>
  24.     </div>
  25.   </div>
  26. </template>
  28. <script>
  29.   export default({
  30.     name:'header',
  31.     data:function () {
  32.       return {
  33.         'nav-btn': 'nav-btn'
  34.       }
  35.     }
  36.   })
  37. </script>
  39. <style scoped>
  40.   .header{width:1105px;margin:0 auto;height:111px;padding:12px 0 18px;position:relative;*z-index:1}
  41.   .header .logo{height:86px;width:256px;margin-top:25px}
  42.   .top-nav .navlist-wrap{width:1050px;margin:0 auto;position:relative}
  43.   .top-nav .navlist{position:absolute;right:130PX;top:-40PX}
  44.   .top-nav .navlist .nav-btn
  45.   {
  46.     float:left;
  47.     margin-left:60px;
  48.     color:#666;
  49.     vertical-align: middle;
  50.     text-decoration:none;
  51.     font-size: large;
  52.   }
  53. </style>

在上面的代码中，我们看到了一个陌生的标签，<router-link>这个是什么玩意呢？其实他就是vue-router集成的一个组件，渲染出来的是一个<a>标签。而他的属性to其实就是一个props属性，这里面的意思就是路由的路径，与前面定义的路由path对应。关于router-link的更多介绍可以看官网router-link API文档

  • DemoFooter.vue:
 
  1. <template>
  2.   <div id="footer">
  3.     <span>Copyright © <a href="http://www.chairis.cn">Chain</a>. All rights reserved</span>
  4.   </div>
  5. </template>
  7. <script>
  8.   export default({
  9.     name:'footer'
  10.   })
  11. </script>
  13. <style scoped>
  14.   #footer
  15.   {
  16.     height:50px;
  17.     position:fixed;
  18.     bottom:0px;
  19.     left: 0px;
  20.     background-color: #eeeeee;
  21.     width: 100%;
  22.     padding-top: 10px;
  23.   }
  24. </style>

我们的组件都已经创建好了，接下来的事情就是把他们组合到一起。这个组合，我们就用App.vue来实现吧。
先整理下我们的思路啊：
在我们的页面上，我们需要把DemoHeader, DemoFooter放进去，而我们的DemoHeader里面定义了导航，我们希望把导航出来的组件放到header和footer之间。所以大致应该是这个样组合：

 
  1.         <demo-header></demo-header>
  2.         <!-- 根据路由显示的组件 -->
  3.         <!-- TO DO -->
  4.         <demo-footer></demo-footer>

下面看下完整的代码吧：

 
  1. <template>
  2.   <div id="app">
  3.         <demo-header></demo-header>
  4.         <router-view></router-view>
  5.         <demo-footer></demo-footer>
  6.     </div>
  7. </template>
  9. <script>
  10. import DemoHeader from './components/DemoHeader'
  11. import DemoFooter from './components/DemoFooter'
  13. export default {
  14.   name: 'app',
  15.   components: {
  16.     DemoHeader,
  17.     DemoFooter
  18.   }
  19. }
  20. </script>
  22. <style>
  23. #app {
  24.   -webkit-font-smoothing: antialiased;
  25.   -moz-osx-font-smoothing: grayscale;
  26.   text-align: center;
  27.   color: #2c3e50;
  28.   background-color: aliceblue;
  29. }
  30. </style>

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

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

注册：

 
  1.   components: {
  2.     DemoHeader,
  3.     DemoFooter
  4.   }

在上面的代码中我们又发现了个陌生标签<router-view>这个标签同样是vue-router的一个内部组件，实际上它是一个是一个 functional 组件。具体信息可以去官网router-viewAPI文档详细了解。它的作用就是渲染路由导航过来的组件，也就是这个标签内就是我们放置DemoHome, DemoAbout, DemoContact的地方。
因为它也是个组件，所以可以配合 <transition> 和 <keep-alive> 使用。如果两个结合一起用，要确保在内层使用 <keep-alive>, 添加上述两个标签后的template代码如下：

 
  1. <template>
  2.   <div id="app">
  3.         <demo-header></demo-header>
  4.         <transition name="fade" mode="out-in">
  5.           <keep-alive>
  6.             <router-view></router-view>
  7.           </keep-alive>
  8.         </transition>
  9.         <demo-footer></demo-footer>
  10.     </div>
  11. </template>

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

 
  1. .fade-enter-active, .fade-leave-active{
  2.   transition: all .3s;
  3. }
  4. .fade-enter, .fade-leave-to{
  5.   opacity: 0;
  6. }

通过上面的代码，我们发现之前学过的过渡这里都可以使用，可参考Vue学习笔记进阶篇——单元素过度
最后我们看下我们做了半天的成果吧：
首页
关于
联系方式

完

Logo
Vue

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐

cover

Mac 使用vscode 创建vue项目后修改文件提示：权限不足，以超级用户身份重试

avatar Vue
cover

基于nodejs+vue云计算的城乡医疗卫生服务系统[程序+论文+开题]-计算机毕业设计

avatar Vue
cover

ElasticSearch迁移至openGauss

avatar Vue