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 相关文章推荐
页面定时刷新(1秒刷新一次)
Nov 22 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
node中的密码安全(加密)
Sep 17 Javascript
vue实现抖音时间转盘
Sep 08 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
php 清除网页病毒的方法
2008/12/05 PHP
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
php生成二维码
2015/08/10 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
Javascript 中介者模式实例
2009/12/16 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
JavaScript函数详解
2015/02/27 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
python中字典增加和删除使用方法
2020/09/30 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
JAVA和C++区别都有哪些
2015/03/30 面试题
四川成都导游欢迎词
2014/01/18 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
留学推荐信怎么写
2015/03/26 职场文书
初中班主任工作总结2015
2015/05/13 职场文书