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:

<template>
 <div id="home">
  <h2>this is home</h2>
 </div>
</template>

<script>
 export default({
  name:'home'
 })
</script>

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

DemoAbout.vue:

<template>
 <div id="about">
  <h2>this is about</h2>
 </div>
</template>

<script>
 export default({
  name:'about'
 })
</script>

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

DemoContact.vue:

<template>
 <div id="contact">
  <h2>this is contact</h2>
 </div>
</template>

<script>
 export default({
  name:'contact'
 })
</script>

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

创建好以上组件后，再使用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: '<App/>',
 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: '<App/>',
 components: { App }
})

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

下面我们看下这两个组件的代码：

DemoHeader.vue:

<template>
 <div id="header" class="wrap">
  <div class="header">
   <h1 class="logo">
    <router-link to="/">
     ![](../assets/logo.png)
    </router-link>
   </h1>
  </div>
  <div class="top-nav">
   <div id="navList" class="navlist-wrap">
    <div class="navlist clearfix">
     <span class="nav-btn">
      <router-link to="/">首页</router-link>
     </span>
     <span class="nav-btn">
      <router-link to="/about">关于</router-link>
     </span>
     <span class="nav-btn">
      <router-link to="/contact">联系方式</router-link>
     </span>
    </div>
   </div>
  </div>
 </div>
</template>

<script>
 export default({
  name:'header',
  data:function () {
   return {
    'nav-btn': 'nav-btn'
   }
  }
 })
</script>

<style 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;
 }
</style>

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

DemoFooter.vue:

<template>
 <div id="footer">
  <span>Copyright © <a href="http://www.chairis.cn" rel="external nofollow" >Chain</a>. All rights reserved</span>
 </div>
</template>

<script>
 export default({
  name:'footer'
 })
</script>

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

我们的组件都已经创建好了，接下来的事情就是把他们组合到一起。这个组合，我们就用App.vue来实现吧。

先整理下我们的思路啊：

在我们的页面上，我们需要把DemoHeader, DemoFooter放进去，而我们的DemoHeader里面定义了导航，我们希望把导航出来的组件放到header和footer之间。所以大致应该是这个样组合：

    <demo-header></demo-header>
    <!-- 根据路由显示的组件 -->
    <!-- TO DO -->
    <demo-footer></demo-footer>

下面看下完整的代码吧：

<template>
 <div id="app">
    <demo-header></demo-header>
    <router-view></router-view>
    <demo-footer></demo-footer>
  </div>
</template>

<script>
import DemoHeader from './components/DemoHeader'
import DemoFooter from './components/DemoFooter'

export default {
 name: 'app',
 components: {
  DemoHeader,
  DemoFooter
 }
}
</script>

<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学习笔记进阶篇——单元素过度

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

首页

关于

联系方式

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue  # router  # 使用  # router的使用  # router安装  # 详解Vue-Router的安装与使用  # 详解express使用vue-router的history踩坑  # 使用vue-router切换页面时  # 获取上一页url以及当前页面url的方法  # vue-router安装和使用详解  # 好了  # 上一  # 在上面  # 一个叫  # 来实现  # 首页  # 学习笔记  # 的是  # 都是  # 是一个  # 导入到  # 是个  # 文档  # 在这里  # 在我们的  # 是这样  # 是基于  # 则是  # 进阶篇  # 它是 

相关文章： 儿童网站界面设计图片,中国少年儿童教育网站-怎么去注册？  Python lxml的etree和ElementTree有什么区别  正规网站制作公司有哪些,目前国内哪家网页网站制作设计公司比较专业靠谱？口碑好？  油猴 教程,油猴搜脚本为什么会网页无法显示？  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？  招贴海报怎么做,什么是海报招贴？  简单实现Android文件上传  平台云上自助建站如何快速打造专业网站？  杭州银行网站设计制作流程,杭州银行怎么开通认证方式？  建站之星如何实现PC+手机+微信网站五合一建站？  如何用5美元大硬盘VPS安全高效搭建个人网站？  免费公司网站制作软件,如何申请免费主页空间做自己的网站？  代购小票制作网站有哪些,购物小票的简要说明？  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  制作网站公司那家好,网络公司是做什么的？  Python多线程使用规范_线程安全解析【教程】  广州网站建站公司选择指南：建站流程与SEO优化关键词解析  巅云智能建站系统：可视化拖拽+多端适配+免费模板一键生成  临沂网站制作企业,临沂第三中学官方网站？  内网网站制作软件,内网的网站如何发布到外网？  内部网站制作流程,如何建立公司内部网站？  如何通过IIS搭建网站并配置访问权限？  如何在万网自助建站平台快速创建网站？  建站主机解析：虚拟主机配置与服务器选择指南  智能起名网站制作软件有哪些,制作logo的软件？  如何快速搭建二级域名独立网站？  简单实现Android验证码  建站主机选哪种环境更利于SEO优化？  建站主机选择指南：服务器配置与SEO优化实战技巧  linux top下的 minerd 木马清除方法  网站企业制作流程,用什么语言做企业网站比较好？  实惠建站价格推荐：2025年高性价比自助建站套餐解析  建站之星收费标准详解：套餐费用及年费价格表一览  建站之星安装后界面空白如何解决？  家族网站制作贴纸教程视频,用豆子做粘帖画怎么制作？  长沙做网站要多少钱,长沙国安网络怎么样？  如何用VPS主机快速搭建个人网站？  威客平台建站流程解析：高效搭建教程与设计优化方案  如何挑选优质建站一级代理提升网站排名？  沈阳个人网站制作公司,哪个网站能考到沈阳事业编招聘的信息？  沈阳制作网站公司排名,沈阳装饰协会官方网站？  建站之星官网登录失败？如何快速解决？  头像制作网站在线制作软件,dw网页背景图像怎么设置？  商务网站制作工程师,从哪几个方面把握电子商务网站主页和页面的特色设计？  南平网站制作公司,2025年南平市事业单位报名时间？  盘锦网站制作公司,盘锦大洼有多少5G网站？  网站建设制作、微信公众号,公明人民医院怎么在网上预约？  制作国外网站的软件,国外有哪些比较优质的网站推荐？  深圳网站制作案例,网页的相关名词有哪些？  ,交易猫的商品怎么发布到网站上去？