这里是《Vue2.0 从零开始学系列?#22987;恰?#30340;第三篇博文,博主小呆是一名互联网非著名的半吊子前端,喜欢学习新技术,受到一些前辈的影响,多少也写过一些?#22987;?#21644;学习心得,但是很遗憾没有一个是成系列的╮(╯▽╰)╭,这次小呆下定决心了,不仅要写一个成品系列文章出来,而?#19968;?#35201;把之前没写完的坑补上,最近一直在学Vue2.0相关的东西,所以就拿它开?#35835;恕?/p>

你能看到这篇文章,?#24471;?#23567;呆没有像之前写?#22987;?#19968;样太监掉(得意~<( ̄ˇ ̄)/),那就继续往下看吧。

上一篇?#22987;?#23567;呆记述了Vue2.0的组成以及ES6的两个知识点,这篇?#22987;?#25105;们来写写路?#19978;?#20851;的东西吧。


关于路由

在开发传统应用时,我们浏览不同页面?#31508;?#38656;要进行页面跳转的而且跳转的控制是由后端开发人员控制的,这种跳转有个很大的缺点就是新页面在未加载出来之前有一个空白期,丑的可怕。

而在SPA应用中,由于是单页面应用,所以我们只有一个html文件,所有的页面展示,跳转,渲染都是在这一个html里进行的。所以需要一个管理工具帮助我们管理页面的渲染,跳转。而通过路由来渲染页面,我们便可以摆脱烦人的空白期,而且更有利于前后分离(终于有一种我写的页面在我的掌握之中了)。


安装

在Vue的世界里,我们使用官方推荐的插件vue-router来作为我们路由的管理工具,最新版的vue-cli里,已经集成安装了vue-router(路由插件)功能,所以我们在上一篇?#22987;?#20013;的App.vue中看到了<router-view></router-view>标签,在main.js中看到了router的加载以及使用。作为一个前端来说,会用不会装还是很尴尬的,所以还是要来简单介绍一下vue-router的安装方法:

npm install vue-router -save-dev

引用及使用

简单介绍完如何安装之后,我们来讲讲在vue-cli里如?#25105;?#29992;插件,上一篇?#22987;?#24403;中,我们在main.js文件里面看到过一?#26410;?#30721;(如下),?#23548;?#19978;我们也说到了其实它是加载了router文件夹下的index.js模块,我们打开index.js

//main.js
import router from './router'
//引用vue模块
import Vue from 'vue'
//引用vuerouter模块
import Router from 'vue-router'
//引用Hello.vue组件
import Hello from 'components/Hello'
//启用router模块(注意只引用是无效的,必须配合启用命令才能使用)
Vue.use(Router)

// 实例化router对象
export default new Router({
  routes: [
    {
      path: '/',  // 路由路径,这里是根路?#31471;?#20197;是'/'
      name: 'Hello',  // 路由名,这个字段是可选的
      component: Hello // 模板
    }
  ]
})

首先我们引用vue模块和vue-router模块,然后通过Vue.use()启动我们的vue-router模块,最后我们通过new的方式来实例化Router对象。?#28210;貌问?#25105;们目前先只理解routes?#38382;?#23601;好了,通过对routes?#38382;?#30340;?#28210;茫?#25105;们便可以自由的?#28210;?#39029;面的跳转啦。

而当路由匹配到url路径之后,就会在<router-view></router-view>里面将对应的模板渲染出啦。接下?#27425;?#20204;便写一个组件试试吧:

  1. 在src目录下新建pages文件夹
  2. 在pages文件夹下新建index.vue和my.vue

这里我们将pages目录用作存放我们的页面级组件,?#35328;?#26377;的components目录用作存放我们的零件组件,打开index.vue和my.vue写点东西吧:

<!-- index.vue -->
<template>
    <h1>这里是首页哟</h1>
</template>
<!-- my.vue -->
<template>
  <h1>这里是我的页面呢</h1>
</template>

OK,页面写好了,我们去?#28210;?#19968;下routes吧:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

import index from 'pages/index.vue'
import my from 'pages/my.vue'

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: index
    },
    {
      path: '/my',
      name: 'My',
      component: my
    }
  ]
})

路由也配好了,我们在到App.vue加两个超链接进行跳转吧:

<template>
  <div id="app">
    <router-link tag="a" to="/" exact>首页</router-link>
    <router-link tag="a" to="/my" exact>我的</router-link>
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

我们通过<router-linl></router-link>标签来设置跳转,默认它会渲染成为一个a标签,如果你希望使用其他标签,更改tag属性即可,to属性用来告诉vue-router将要跳转的地址。下图为我们点击跳转后的效果:

<router-link tag="a" to="/" exact>首页</router-link>
//默认渲染为a标签
<a href="/">首页</a>


优化

到这里,可能有些童鞋会问小呆,如果页面很多,那么router/index.js岂不是很长很长,能不能把路由的routes和?#28210;?#25991;件分开呢?(哇塞,这位童鞋你问的真棒!)接下来小呆要说的就是如何更便捷的管理我们的routes。

router目录下新建routes.js

//routes.js
import index from 'pages/index.vue'
import my from 'pages/my.vue'

const routes = [
  {
    path: '/',
    name: 'Index',
    component: index
  },
  {
    path: '/my',
    name: 'My',
    component: my
  }
]

export default routes

我?#21069;?#38656;要渲染的页面都放到routes.js里面进行管理,并通过创建一个常量来?#28210;?#25105;们的路由路径,最后通过我们上一篇?#22987;?#23398;到的export default命令把接口暴露出去。

我们在ES5中声明变量都是用var,并且知道变量有全?#30452;?#37327;和局部变量,在ES6中,新加了两个声明变量的方式:letconst命令,let命令用来声明块级变量,const命令用来声明常量。常量的意思就是:它只是?#27426;?#29366;态,一旦声明,便不可以修改了。这里我们的routes?#28210;?#20415;用一个const命令来声明。

更多关于let和const命令的知识,请阅?#21015;?#21574;的另一篇专门介绍let和const的?#22987;?a href="http://www.pvmy.icu/studynotes/201612261045.html">《ES6新手入门全过程(一):let和const命令》

最后我们在index.js里面将优化后的routes引用进来:

//index.js
import Vue from 'vue'
import Router from 'vue-router'
import routes from './routes.js'
Vue.use(Router)

export default new Router({
  routes
})

结语

OK,到这里,路由的基本使用方法就记述完了,还是继承小呆的一贯风格,用到?#27169;?#23398;到?#27169;?#25152;以关于vue-router的更多高级功能,等我们以后用到的时候再学吧。到目前为止,小呆已经记述了三篇?#22987;?#20102;,三篇?#22987;?#30340;内容对于一些童鞋来说可能还是略过简单,一句话就是:有多大本事干多大事。 小呆不指望目前能够像一些大神一样去讲解源码,讲解很深奥的东西,只是希望通过自己的理解,能够让更多像小呆一样的人使用起来一些新的框架,新的知识。

好啦,啰嗦了半天,如果你喜欢小呆的?#22987;牽?#37027;么就在下方点个喜欢的同时分享给更多的人看吧。