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 相关文章推荐
firebug的一个有趣现象介绍
Nov 30 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
使用Post提交时须将空格转换成加号的解释
Jan 14 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
vue之数据交互实例代码
Jun 16 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
详解微信UnionID作用
May 15 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 Javascript
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
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
javascript学习之闭包分析
2010/12/02 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
python中迭代器(iterator)用法实例分析
2015/04/29 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
python如何使用代码运行助手
2020/07/03 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
安全事故检讨书
2014/01/18 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
公司保密管理制度
2015/08/04 职场文书
班级管理经验交流材料
2015/11/02 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书