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 相关文章推荐
复制本贴标题和地址的js代码
Jul 01 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
Vue.js动态组件解析
Sep 09 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
Vue使用screenfull实现全屏效果
Sep 17 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
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
php中动态变量用法实例
2015/06/10 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
php-msf源码详解
2017/12/25 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
JS的get和set使用示例
2014/02/20 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
我就是这样学习Python中的列表
2019/06/02 Python
Python 实现try重新执行
2019/12/21 Python
Python多线程的退出控制实现
2020/08/10 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
中国宠物用品商城:E宠商城
2016/08/27 全球购物
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
2014年物流工作总结
2014/11/25 职场文书
Nginx限流和黑名单配置
2022/05/20 Servers
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL