译| 自定义一个Vue路由器

大量的教程在解释Vue的官方路由库vue-router如何集成到现有的Vue应用中作了很好的工做。 vue-router经过向咱们提供将应用的组件映射到不一样的浏览器URL路由所需的功能，作了出色的工做。javascript

简单的应用一般不须要彻底成熟的路由库，如vue-router。 在本文中，咱们将使用Vue构建一个简单的自定义客户端路由器。 经过这样作，咱们将了解须要处理什么来构建客户端路由以及潜在的缺点。css

虽然本文假设了Vue.js的基本知识; 在咱们开始编写代码时，咱们将一步步来解释！html

Routing

首先也是最重要的：咱们为那些可能对这个概念不熟悉的人解释一下Routing。前端

在Web开发中，路由一般是指根据从浏览器URL派生的规则来分割应用程序的UI。 想象一下，点击一个连接并让网址从https://website.com转到https://website.com/article/。 这是路由。vue

路由一般分为两个部分：java

1.服务器端路由node

客户端（即浏览器）在每次URL更改时向服务器发出请求。webpack

2.客户端路由git

客户端仅在首页加载时向服务器发出请求。 而后在客户端上处理基于URL路由的应用程序UI的任何更改。github

客户端路由是术语单页应用程序（简称SPA）产生的概念。SPA是Web应用，它只加载一次，并经过用户交互动态更新，而无需向服务器发出后续请求。 经过在SPA中进行路由，JavaScript动态呈现不一样的UI。

如今咱们对客户端路由和SPA进行了简要的了解，让咱们来概述一下咱们将要开展的工做！

案例分析：神奇宝贝

咱们打算构建的应用是一个简单的Pokémon应用程序，基于URL路线显示特定神奇宝贝的详细信息。

该应用将有三个惟一的URL路由：/charizard，/blastoise和/ venusaur。 根据输入对应的网址路线，将显示不一样的神奇宝贝：

另外，在应用的底部存在页脚连接，以便点击时将用户引导至各个路径：

咱们甚至须要路由吗？

对于这样的简单应用，咱们不必定须要客户端路由器才能使咱们的应用正常工做。 这个特定的应用能够由一个简单的父子组件层次结构组成，该层次结构使用Vue支持来指示应该显示的信息。 这里简单写一下：

//HTML代码
<div id="app" class="container">
  <div class="container"> <div class="columns is-mobile"> <div class="pokemon column"> <pokemon-card :pokemon="pokemon"></pokemon-card> <div class="pokemon-links"> <a @click=setPokemon('charizard') :class="{ active: pokemon === 'charizard' }">Charizard</a> <a @click=setPokemon('blastoise') :class="{ active: pokemon === 'blastoise' }">Blastoise</a> <a @click=setPokemon('venusaur') :class="{ active: pokemon === 'venusaur' }">Venusaur</a> </div> </div> </div> </div> </div>
复制代码

//sass代码
@import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative:400,700|Nunito:600');

html, body {
  height: 100%;
  padding-top: 10px;
  background: linear-gradient(to bottom right,#024,#402);
}

#app {
  height: 100%;
  padding-top: 0px;
  font-family: Cinzel Decorative, sans-serif;
}

.container, .columns {
  height: 100%;
}

.pokemon {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pokemon .card {
  border-radius: 20px;
  border: 1px solid #ffdd56;
  margin-bottom: 2.5rem;
  background: none;
}

.pokemon .card--charizard {
  border-color: #ffdd56;
  
  .card-image-container {
    position: absolute;
    width: 290px;
    top: -85px;
  }
  
  .card-content .main .hp::before {
    background: linear-gradient(to right, #a86e3c, #f5ae67);
  }

  .card-content .stats .tag {
    background-color: #ffdd57;
  }
}

.pokemon .card--blastoise {
  border-color: #72d0fb;

  .card-image-container {
    position: absolute;
    width: 200px;
    top: -10px;
    left: 40px;
  }
  
  .card-content .main .hp::before {
    background: linear-gradient(to right, #c3fcff, #00a5f8);
  }
  
  .card-content .stats .tag {
    background-color: azure;
  }
}

.pokemon .card--venusaur {
  border-color: #ff3860;
  
  .card-image-container {
    position: absolute;
    width: 290px;
    top: -10px;
    left: -6px;
  }
  
  .card-content .main .hp::before {
  background: linear-gradient(to right, #92df00, #4ea13f);
}

  .card-content .stats .tag {
    background-color: #ff3860;
    color: #fff;
  }
}

.pokemon .card .card-image {
  position: relative;
  display: block;
  height: 185px;
}

.pokemon .card-content .main {
  padding-bottom: 10px
}

.pokemon .card-content .title {
  font-family: Cinzel Decorative, sans-serif;
  font-size: 25px;
  margin-bottom: 1rem;
  letter-spacing: 4px;
}

.pokemon .card-content .stats {
  font-size: 15px;
}

.pokemon .card-content .stats .tag {
  font-size: 10px;
  border-radius: 10px;
}

.pokemon .card-content .stats .column {
  width: 75px;  
}

.pokemon .card-content .stats .center-column {
  min-width: 100px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.pokemon .hp {
  position: relative;
  font-size: 15px;
}

.pokemon .hp::before {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 50%;
  height: 5px;
  border-radius: 3px;
  content: ' ';
  transform: translateX(-50%);
}

.pokemon-links a {
  letter-spacing: 1px;
  color: #68c8b7;
  margin: 0 20px;
}

.pokemon-links a.active {
  color: #FFF;
  font-weight: 600;
}

// For thumbnail preview; hack :P
@media(max-width: 758px) and (max-height: 500px) {
  .pokemon .card {
    margin-bottom: 1.5rem;
  }
  
  .pokemon .card-content {
    padding: 1.0rem;
  }
}
复制代码

//vue代码
const pokemonData = {
  "charizard": {
    name: "Charizard",
    imageTag: "6-Charizard.png",
    hp: 78,
    type: '🔥',
    weight: 199,
    height: 1.7
  },
  "blastoise": {
    name: "Blastoise",
    imageTag: "9-Blastoise.png",
    hp: 79,
    type: '💧',
    weight: 223,
    height: 1.6
  },
  "venusaur": {
    name: "Venusaur",
    imageTag: "8003-Mega-Venusaur.png",
    hp: 80,
    type: '🍃',
    weight: 220,
    height: 2.0
  }
}

const PokemonCard = {
  template: ` <div class="card has-text-weight-bold has-text-white" :class="['card--' + pokemon]"> <div class="card-image"> <div class="card-image-container"> <img :src="'http://static.pokemonpets.com/images/monsters-images-800-800/' + getPokemon.imageTag"/> </div> </div> <div class="card-content has-text-centered"> <div class="main"> <div class="title has-text-white">{{ getPokemon.name }}</div> <div class="hp">hp {{ getPokemon.hp }}</div> </div> <div class="stats columns is-mobile"> <div class="column has-text-centered">{{ getPokemon.type }}<br><span class="tag">Type</span></div> <div class="column has-text-centered center-column">{{ getPokemon.weight }} lbs<br><span class="tag">Weight</span></div> <div class="column has-text-centered">{{ getPokemon.height }} m <br><span class="tag">Height</span></div> </div> </div> </div> `,
  props: ['pokemon'],
  computed: {
    getPokemon() {
      return pokemonData[this.pokemon];
    }
  }
}

new Vue({
  el: '#app',
  data: {
    pokemon: 'charizard'
  },
  methods: {
    setPokemon(pokemon) {
      this.pokemon = pokemon;
    }
  },
  components: {
    'pokemon-card': PokemonCard
  }
})
复制代码

Result:

尽管该应用在功能上能够工做，但它却遗漏了大多数Web应用程序所预期的实质性功能 - 响应浏览器导航事件。 咱们但愿咱们的神奇宝贝应用程序能够访问，并显示不一样路径名称的不一样细节：/charizard，/ blastoise和/venusaur。 这将容许用户刷新不一样的页面并在应用中保留它们的位置，为URL添加书签以便稍后返回，也能够与其余人共享该URL。 这些是在应用内建立路线的一些主要优势。

如今咱们已经了解了咱们将要开展的工做，让咱们开始构建吧！

准备应用程序

一步一步遵循的最简单的方法（若是你愿意这样作）是克隆我设置的GitHub仓库。

github.com/djirdehh/po…

克隆时，经过如下方式安装项目依赖关系：

npm install
复制代码

咱们来看一下项目目录。

$ ls
README.md
index.html
node_modules/
package.json
public/
src/
static/
webpack.config.js
复制代码

项目脚手架中还存在隐藏文件，.babelrc和.gitignore。

这个项目是一个简单的webpack配置的应用，用Vue命令行界面vue-cli搭建。

index.html是咱们声明DOM元素的地方 - ＃app-咱们将用它来定义咱们的Vue应用：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.css">
    <link rel="stylesheet"
      href="../public/styles.css" />
    <title>Pokémon - Routing</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>
复制代码

在index.html文件的标记中，咱们用Bulma做为咱们应用的CSS框架和咱们本身的styles.css文件，它们位于public/文件夹中。

因为咱们的重点是Vue.js的使用，应用已经布置了全部的自定义CSS。

src/文件夹是咱们直接开始工做的地方：

$ ls src/
app/
main.js
复制代码

src/main.js表明了咱们的Vue应用的起点。 这是咱们的Vue实例被实例化的地方，咱们声明了要渲染的父组件，以及咱们的应用将被安装到的DOM元素#app：

import Vue from 'vue';
import App from './app/app';

new Vue({
  el: '#app',
  render: h => h(App)
});
复制代码

咱们从src/app/app.js文件中指定App组件做为咱们应用的主要父组件。

在src/app目录中，还有两个文件 - app-custom.js和app-vue-router.js：

$ ls src/app/
app-custom.js
app-vue-router.js
app.js
复制代码

app-custom.js表示使用自定义Vue路由器完成应用的实现（即咱们将在本文中构建的内容）。 app-vue-router.js是一个使用vue-router库的完整路由实现。

对于整篇文章，咱们只会介绍src/app/app.js文件的代码。那么，让咱们来看看src/app/app.js中的开始代码：

const CharizardCard = {
  name: 'charizard-card',
  template: ` <div class="card card--charizard has-text-weight-bold has-text-white"> <div class="card-image"> <div class="card-image-container"> <img src="../../static/charizard.png"/> </div> </div> <div class="card-content has-text-centered"> <div class="main"> <div class="title has-text-white">Charizard</div> <div class="hp">hp 78</div> </div> <div class="stats columns is-mobile"> <div class="column">&#x1f525;<br> <span class="tag is-warning">Type</span> </div> <div class="column center-column">199 lbs<br> <span class="tag is-warning">Weight</span> </div> <div class="column">1.7 m <br> <span class="tag is-warning">Height</span> </div> </div> </div> </div> `
};

const App = {
  name: 'App',
  template: ` <div class="container"> <div class="pokemon"> <pokemon-card></pokemon-card> </div> </div> `,
  components: {
    'pokemon-card': CharizardCard
  }
};

export default App;
复制代码

目前，存在两个组件：CharizardCard和App。 CharizardCard组件是一个简单的模板，显示Charizard神奇宝贝的细节。 App组件在其组件属性中声明了CharizardCard组件，并在其模板中将其呈现为 </ pokemon-card>。

咱们目前只有静态内容，咱们能够看到咱们是否运行咱们的应用：

npm run dev
复制代码

并启动localhost：8080：

为了实现咱们要作的，介绍两个新组件：分别包含Blastoise和Venusaur神奇宝贝细节的BlastoiseCard和VenusaurCard。 咱们能够在CharizardCard后面列出这些组件：

const CharizardCard = { 
  // ... 
};

const BlastoiseCard = {
  name: 'blastoise-card',
  template: ` <div class="card card--blastoise has-text-weight-bold has-text-white"> <div class="card-image"> <div class="card-image-container"> <img src="../../static/blastoise.png"/> </div> </div> <div class="card-content has-text-centered"> <div class="main"> <div class="title has-text-white">Blastoise</div> <div class="hp">hp 79</div> </div> <div class="stats columns is-mobile"> <div class="column">&#x1f4a7;<br> <span class="tag is-light">Type</span> </div> <div class="column center-column">223 lbs<br> <span class="tag is-light">Weight</span> </div> <div class="column">1.6 m<br> <span class="tag is-light">Height</span> </div> </div> </div> </div> `
};

const VenusaurCard = {
  name: 'venusaur-card',
  template: ` <div class="card card--venusaur has-text-weight-bold has-text-white"> <div class="card-image"> <div class="card-image-container"> <img src="../../static/venusaur.png"/> </div> </div> <div class="card-content has-text-centered"> <div class="main"> <div class="title has-text-white">Venusaur</div> <div class="hp hp-venusaur">hp 80</div> </div> <div class="stats columns is-mobile"> <div class="column">&#x1f343;<br> <span class="tag is-danger">Type</span> </div> <div class="column center-column">220 lbs<br> <span class="tag is-danger">Weight</span> </div> <div class="column">2.0 m<br> <span class="tag is-danger">Height</span> </div> </div> </div> </div> `
};

const App = { 
  // ... 
};

export default App;
复制代码

随着咱们的应用组件的创建，咱们如今能够开始考虑如何在这些组件之间建立路由。

router-view

为了创建路由，咱们将首先建立一个新组件，该组件负责根据应用的位置呈现指定组件。 咱们将在一个名为View的常量变量中建立该组件。

在咱们建立这个组件以前，让咱们看看咱们如何使用它。 在App组件的模板中，咱们将删除的声明，而是渲染即将到来的router-view组件。 在组件属性中，咱们将视图组件常量注册为以在模板中声明。

const App = {
  name: 'App',
  template: ` <div class="container"> <div class="pokemon"> <router-view></router-view> </div> </div> `,
  components: {
    'router-view': View
  }
};

export default App;
复制代码

router-view组件将根据URL路由匹配正确的神奇宝贝组件。 这个匹配将在咱们将建立的路由数组中指定。 咱们将在App组件上方建立这个数组：

const CharizardCard = { 
  // ... 
};
const BlastoiseCard = { 
  // ... 
};
const VenusaurCard = { 
  // ... 
};

const routes = [
  {path: '/', component: CharizardCard},
  {path: '/charizard', component: CharizardCard},
  {path: '/blastoise', component: BlastoiseCard},
  {path: '/venusaur', component: VenusaurCard}
];

const App = { 
  // ... 
};

export default App;
复制代码

咱们已经将每一个Pokémon路径设置为各自的组件（例如/blastoise将呈现BlastoiseCard组件）。 咱们还将根路径设置为CharizardCard组件。

如今让咱们开始建立咱们的router-view组件。

router-view组件实质上将成为在组件之间动态切换的安装点。 咱们能够在Vue中作到这一点的一种方法是使用保留的元素来创建动态组件。

咱们来建立一个router-view的起点，以了解它是如何工做的。 如前面提到的，咱们将在名为View的常量变量内建立router-view。让咱们在咱们的路由声明以后当即设置View：

const CharizardCard = { 
  // ... 
};
const BlastoiseCard = { 
  // ... 
};
const VenusaurCard = { 
  // ... 
};

const routes = [
  // ...
];

const View = {
  name: 'router-view',  
  template: `<component :is="currentView"></component>`,  
  data() {  
    return {  
      currentView: CharizardCard  
    }
  }
}; 

const App = {
// ... 
};

export default App;
复制代码

保留的元素将呈现is属性绑定到的任何组件。 在上面，咱们已经将is属性附加映射到CharizardCard组件的currentView属性。 因此，不管URL路径是什么，咱们的应用经过显示CharizardCard做为开始点。

虽然router-view如今在应用内能够呈现，但它目前不是动态的。 咱们须要router-view在加载页面时根据URL路径名显示正确的组件。 为此，咱们将使用created()来过滤routes数组，并返回具备与URL路径匹配的路径的组件。 这会使View看起来像这样：

const View = {
  name: 'router-view',  
  template: `<component :is="currentView"></component>`,  
  data() {  
    return {  
      currentView: {}  
    }
  },
  created() {
    this.currentView = routes.find(
      route => route.path === window.location.pathname
    ).component;
  }
};
复制代码

在数据函数中，咱们如今用一个空对象实例化currentView。 在created()中，咱们使用JavaScript的本地find()方法返回匹配route.path === window.location.pathname的路由中的第一个对象。 而后咱们能够用object.component（其中object是find()返回的对象）获取组件。

在浏览器环境中，window.location是一个包含浏览器当前位置属性的特殊对象。咱们从该对象中获取路径名，该对象是URL的路径。

在这个阶段，咱们将可以根据咱们的浏览器URL的状态查看不一样的神奇宝贝卡组件！

还有一些咱们应该考虑的。 若是输入了一个随机的URL路径名，咱们的应用将会出现错误，而且没有任何提示。

为避免这种状况，咱们介绍一个简单的检查，若是URL路径名不匹配路径数组中存在的任何路径，则显示“未找到”模板。 咱们将find()方法分离到名为getRouteObject()的组件方法，以免重复。 这会将视图对象更新为：

const View = {
  name: 'router-view',  
  template: `<component :is="currentView"></component>`,  
  data() {  
    return {  
      currentView: {}  
    }
  },
  created() {  
    if (this.getRouteObject() === undefined) {
      this.currentView = {
        template: ` <h3 class="subtitle has-text-white"> Not Found :(. Pick a Pokémon from the list below! </h3> `
      };
    } else {
      this.currentView = this.getRouteObject().component;
    } 
  },
  methods: {
    getRouteObject() {
      return routes.find(
        route => route.path === window.location.pathname
      );
    }
  }
};
复制代码

若是getRouteObject()方法返回undefined，咱们将显示一个“未找到”模板。 若是getRouteObject()从路由中返回一个对象，咱们将currentView绑定到该对象的组件。 如今，若是输入一个随机URL，用户将收到通知：

若是URL路径名与路由数组中的任何值都不匹配，则会呈现“未找到”视图。 “未找到”模板告诉用户从列表中选择一只神奇宝贝。 该列表将是咱们将建立的连接，以容许用户导航到不一样的URL路线。

漂亮！咱们的应用正在响应某些外部状态，即浏览器的位置。 router-view根据应用的位置肯定应该显示哪一个组件。 如今，咱们须要构建连接，以便在不发出Web请求的状况下更改浏览器的位置。 随着位置更新，咱们但愿从新渲染咱们的Vue程序，并依靠router-view来适当肯定要渲染的组件。

咱们将这些连接标记为router-link组件。

router-link

在网页界面中，咱们使用HTML a标签建立连接。 咱们想要的是一种特殊的a标签。 当用户点击这个标签时，咱们但愿浏览器跳过它的默认连接，使得Web请求获取下一页。 相反，咱们只是想手动更新浏览器的位置。

让咱们来编写一个router-link，它会生成带有特殊点击绑定的a标签。 当用户点击router-link组件时，咱们将使用浏览器的历史API来更新浏览器的位置。

就像咱们使用router-view同样，让咱们看看在构建它以前咱们将如何使用这个组件。

在App组件的模板中，咱们在父元素