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


Posted in Javascript onJuly 19, 2017

介绍

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学习笔记进阶篇之vue-router安装及使用方法

首页

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

关于

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

联系方式

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Stop SQL Server
Jun 21 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 Javascript
vue基于mint-ui的城市选择3级联动的示例
Oct 25 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
微信小程序事件流原理解析
Nov 27 Javascript
Vue仿百度搜索功能
Dec 28 Vue.js
Vue学习笔记进阶篇之单元素过度
Jul 19 #Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 #jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 #jQuery
利用require.js与angular搭建spa应用的方法实例
Jul 19 #Javascript
ztree简介_动力节点Java学院整理
Jul 19 #Javascript
Angular 1.x个人使用的经验小结
Jul 19 #Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 #Javascript
You might like
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
PHP 调试工具Debug Tools
2011/04/30 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
关于初学PHP时的知识积累总结
2013/06/07 PHP
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
php+js实现异步图片上传实例分享
2014/06/02 PHP
php数据访问之增删改查操作
2016/05/09 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
python操作 hbase 数据的方法
2016/12/18 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
python全栈知识点总结
2019/07/01 Python
django做form表单的数据验证过程详解
2019/07/26 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
实习单位评语
2014/04/26 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
基石观后感
2015/06/12 职场文书