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

介绍

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

安装

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

   
   
   
   

    
    
    
    
npm install vue-router --save
   
   
   
   

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

   
   
   
   

    
    
    
    
  "dependencies": {
    
    
    
    
    "vue": "^2.3.3",
    
    
    
    
    "vue-router": "^2.7.0"
    
    
    
    
  },
   
   
   
   

使用

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

   
   
   
   

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

然后便是实例化：

   
   
   
   

    
    
    
    
const router = new VueRouter({
    
    
    
    
  mode: 'history',
    
    
    
    
  routes:[
    
    
    
    
    {path: '/', component:DemoHome},
    
    
    
    
    {path: '/about', component:DemoAbout},
    
    
    
    
    {path: '/contact', component:DemoContact}
    
    
    
    
  ]
    
    
    
    
})
   
   
   
   

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

• DemoHome.vue:

   
   
   
   

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    
 scoped>
    
    
    
    
  #home{
    
    
    
    
    width: 100%;
    
    
    
    
    height: 500px;
    
    
    
    
    background-color: khaki;
    
    
    
    
  }
    
    
    
    

   
   
   
   

• DemoAbout.vue:

   
   
   
   

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    
 scoped>
    
    
    
    
#about{
    
    
    
    
  width: 100%;
    
    
    
    
  height: 500px;
    
    
    
    
  background-color: antiquewhite;
    
    
    
    
}
    
    
    
    

   
   
   
   

• DemoContact.vue:

   
   
   
   

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    
 scoped>
    
    
    
    
  #contact{
    
    
    
    
    width: 100%;
    
    
    
    
    height: 500px;
    
    
    
    
    background-color: lightskyblue;
    
    
    
    
  }
    
    
    
    

   
   
   
   

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

   
   
   
   

    
    
    
    
import DemoHome from './components/DemoHome'
    
    
    
    
import DemoAbout from './components/DemoAbout'
    
    
    
    
import DemoContact from './components/DemoContact'
   
   
   
   

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

   
   
   
   

    
    
    
    
new Vue({
    
    
    
    
  el: '#app',
    
    
    
    
  router,
    
    
    
    
  template: '',
    
    
    
    
  components: { App }
    
    
    
    
})
   
   
   
   

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

   
   
   
   

    
    
    
    
import Vue from 'vue'
    
    
    
    
import VueRouter from 'vue-router'
    
    
    
    
import App from './App'
    
    
    
    
import DemoHome from './components/DemoHome'
    
    
    
    
import DemoAbout from './components/DemoAbout'
    
    
    
    
import DemoContact from './components/DemoContact'
    
    
    
    

    
    
    
    
Vue.use(VueRouter)
    
    
    
    

    
    
    
    
Vue.config.productionTip = false
    
    
    
    

    
    
    
    
const router = new VueRouter({
    
    
    
    
  mode: 'history',
    
    
    
    
  routes:[
    
    
    
    
    {path: '/', component:DemoHome},
    
    
    
    
    {path: '/about', component:DemoAbout},
    
    
    
    
    {path: '/contact', component:DemoContact}
    
    
    
    
  ]
    
    
    
    
})
    
    
    
    
/* eslint-disable no-new */
    
    
    
    
new Vue({
    
    
    
    
  el: '#app',
    
    
    
    
  router,
    
    
    
    
  template: '',
    
    
    
    
  components: { App }
    
    
    
    
})
   
   
   
   

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

• DemoHeader.vue:

   
   
   
   

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    
 scoped>
    
    
    
    
  .header{width:1105px;margin:0 auto;height:111px;padding:12px 0 18px;position:relative;*z-index:1}
    
    
    
    
  .header .logo{height:86px;width:256px;margin-top:25px}
    
    
    
    
  .top-nav .navlist-wrap{width:1050px;margin:0 auto;position:relative}
    
    
    
    
  .top-nav .navlist{position:absolute;right:130PX;top:-40PX}
    
    
    
    
  .top-nav .navlist .nav-btn
    
    
    
    
  {
    
    
    
    
    float:left;
    
    
    
    
    margin-left:60px;
    
    
    
    
    color:#666;
    
    
    
    
    vertical-align: middle;
    
    
    
    
    text-decoration:none;
    
    
    
    
    font-size: large;
    
    
    
    
  }
    
    
    
    

   
   
   
   

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

• DemoFooter.vue:

   
   
   
   

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    
 scoped>
    
    
    
    
  #footer
    
    
    
    
  {
    
    
    
    
    height:50px;
    
    
    
    
    position:fixed;
    
    
    
    
    bottom:0px;
    
    
    
    
    left: 0px;
    
    
    
    
    background-color: #eeeeee;
    
    
    
    
    width: 100%;
    
    
    
    
    padding-top: 10px;
    
    
    
    
  }
    
    
    
    

   
   
   
   

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

下面看下完整的代码吧：

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

   
   
   
   

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

注册：

   
   
   
   

    
    
    
    
  components: {
    
    
    
    
    DemoHeader,
    
    
    
    
    DemoFooter
    
    
    
    
  }
   
   
   
   

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

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

   
   
   
   

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

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

完