Image placeholder

Vue Router 入门

Image placeholder
F2EX JavaScript 2017-07-25

Vue是一个很棒的Javascript库，它允许您创建一些非常酷的动态前端应用程序。Vue也适用于单页应用（SPA）。SPA的工作方式略有不同，您的标准后端Web应用程序内置于PHP中。SPA不需要对后端的不同路由进行完全呈现的页面作为响应，而是在前端执行所有的页面呈现，并且只有在需要新数据或需要刷新时才向服务器发送请求，保存。

这可以提高Web应用程序的响应能力，因为您只需渲染页面一次，并根据应用程序的当前上下文动态显示它们。为了这样做，您需要一种方式来区分彼此的不同视图或页面。在SPA中，这是通过路由器完成的。幸运的是Vue有一个完全支持的第一方路由器库称为vue-router。

在本文中，我们将设置一个简单的SPA，它将显示一些有关流行加密币的信息，我们称之为“加密信息”。它将有多个页面，并使用vue-router链接这些页面。您应该已经熟悉Vue，以及创建和使用Vue组件。拥有.vue文件的经验是有帮助但不是必需的。

安装

要开始使用，请使用方便的Vue命令行安装程序。打开终端并运行以下命令。

# install vue-cli
$ npm install --global vue-cli
# create a new project using the "webpack" template
$ vue init webpack router-app

出现提示时，请回答屏幕上显示的问题。确保安装vue-router时回答“yes”。

This will install Vue 2.x version of the template.

 For Vue 1.x use: vue init webpack#1.0 router-app

? Project name router-app 
? Project description A Vue.js project  
? Author  
? Vue build standalone  
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

安装应用程序后，安装所有的依赖项并启动一个开发服务器。

# install dependencies and go!
$ cd router-app
$ npm install
$ npm run dev

您现在应该能够在浏览器中访问 http://localhost:8080 并看到类似的内容。

开始干

关于Vue命令行工具的好处是它将为我们连接vue-router。为了更好地了解它的工作原理，我们可以看看创建的样板。 打开/src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})

前两行导入vue和vue-router。第三行导入一个名为Hello的组件。我们会讨论一下为什么。对于由vue命令行工具在webpack中设置的/src目录，@只是一个很好的别名。

接下来我们告诉Vue使用vue-router插件。最后路由器配置了一条路由。路由器使用Vue组件作为页面。在上面的例子中，我们要在用户导航到 / route时渲染Hello组件。

接下来打开/src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '',
  components: { App }
})

第一行再次导入Vue。第二行引入了一个名为App的组件。这将作为应用程序的根组件。第三行导入我们前面提到的路由器设置。下一行告诉Vue是否在浏览器的开发者控制台中显示提示和警告。在这种情况下，它被设置为false。

最后，一个新的Vue实例被创建并挂载到我们的html中的#app div，然后实例化了App组件。我们也从前面注入路由器配置。

接下来打开/src/App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这就像我之前提到的，是根部分。它将作为我们的页面组件被渲染的要点。请注意，我们将使用的所有组件都在.vue文件中，允许我们将模板，JavaScript和样式保存到单个文件中。

在<template>标签中，我们只需要一些简单的标记。重要的是<router-view>标签。 路由器使用此标签作为容器，用于渲染与不同路由绑定的不同组件。把它当成一个占位符。

<script>标签只包含一个不执行任何操作的简单Vue组件对象。 <style>标签只包含由Vue命令行工具提供的一些不错的样式模板。

接下来打开/src/components/Hello.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

这与App组件非常相似。再者，在<template>标签中有组件的HTML标记。在这种情况下，当我们在浏览器中打开http://localhost:8080时，所有的链接和文本都会显示出来。这是因为在我们的路由器配置中，我们指定/或我们的应用程序的根路径应该指向Hello.vue。

现在让我们摆脱默认内容并创建一个更简单的主页。编辑Hello.vue如下所示：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
  export default {
    name: 'Hello',
    data () {
      return {
        msg: 'Welcome to Crypto Info'
      }
    }
  }
</script>

如果你重新加载，你现在应该看到这样一个页面。

创建和链接到路由

现在让我们创建一个新页面，并添加一些链接，以便在两者之间进行导航。打开/src/router/index.js并将其编辑为如下所示。

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

我们已经添加了一个新的路径/about，它指向一个名为About的新组件。我们还将顶部的新组件导入。我们将尽快创造这个。

现在打开/src/App.vue并编辑<template>部分看起来像这样。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-link :to="{ name: 'Hello' }">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

如您所见，我们使用两种不同的方法添加了两个<router-link>标签。路由器使用<router-link>为您创建的路由创建html链接。第一种方法使用命名路由。如果你还记得，在/src/router/index.js中，我们在路由中添加了name参数。在这种情况下，路由的名称就像您指向的组件一样。第二种方法是标准方法，只需指定要链接的路径。

如果您刷新浏览器，您应该看到原始的欢迎页面，但添加了两个链接。

如果您单击About链接，您将获得一个空白页。这是因为我们还没有创建组件。让我们来解决这个问题，创建/src/components/About.vue。

<template>
  <div class="about">
    <h1>What is a Crypto-Currency?</h1>
    <p>
      It's a digital currency in which encryption techniques are used to regulate the generation of units of currency 
      and verify the transfer of funds, operating independently of a central bank.
    </p>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

现在，如果您刷新浏览器并单击About您应该看到新页面。

动态路由

那么我们可以创建一个新的页面和路由来指向它，但传递参数呢？我们需要一个页面，根据URL中传递的字符串ID显示有关各种加密币种的有用信息。让我们再次打开/src/router/index.js并添加第三个路由。

...
import Coins from '@/components/Coins'

...

export default new Router({
  routes: [
    ...
   {
      path: '/coins/:id',
      name: 'Coins',
      component: Coins
    }
  ]
})

为了显示各种货币的最新信息，我们将使用流行的axios http客户端从免费的硬币市值API获取数据。我们将在URL中接受一个字符串参数:id。这将被传递给API以检索相关数据。

首先我们需要安装axios。

npm install --save axios

接下来创建一个名为/src/components/Coins.vue的文件

<template>
  <div>
    <p>Name: {{ coin.name }}</p>
    <p>Symbol: {{ coin.symbol }}</p>
    <p>Price (USD): {{ coin.price_usd }}</p>
  </div>
</template>
<script>
  import axios from 'axios'

  export default {
    name: 'Coins',

    data() {
      return {
        coin: {}
      }
    },

    created() {
      this.fetchData()
    },

    watch: {
      '$route': 'fetchData'
    },

    methods: {
      fetchData() {
        axios.get('https://api.coinmarketcap.com/v1/ticker/'+this.$route.params.id+'/')
        .then((resp) => {
          this.coin = resp.data[0]
          console.log(resp)
        })
        .catch((err) => {
          console.log(err)
        })
      }
    }
  }
</script>

您会注意到，在我们组件的数据对象中，我们声明一个名为coin的空对象。这将在抓取后存储我们的硬币信息。在<template>部分，我们有一些标记来显示硬币的名称，符号和美元价格。创建的方法是Vue使用的一个特殊的钩子，它在渲染组件之前被调用。在这种情况下，我们调用fetchData方法，该方法向Coin Market Capitalization API发送具有axios的GET请求，并在最后传递:id参数。

我们从$route 对象的 params属性获取参数。该对象由VueRouter自动注入。我们想要的参数是我们在路由器文件中定义的:id参数。在成功的情况下，如then方法中所定义的，我们将返回的数据保存到coin对象中。然后将其显示在模板中。

另外我们需要做的是为$route对象添加一个watch钩子。VueRouter组件只能呈现一次。如果需要复原，则需要手动执行，因此在这种情况下，当$route中的:id参数发生更改，然后获取新数据时，我们需要重新投递。

现在可以在/src/App.vue中创建更多链接，以查看如何使用这个新页面。

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-link :to="{ name: 'Hello' }">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/coins/ethereum">Ethereum</router-link>
    <router-link to="/coins/bitcoin">Bitcoin</router-link>
    <router-view></router-view>
  </div>
</template>

如果您刷新浏览器并点击Ethereum，您应该会看到下面的结果。

现在点击Bitcoin，你也应该能看到那个硬币的相关信息。如果您想尝试其他硬币，请查看https://api.coinmarketcap.com/v1/ticker/并从列表中粘贴几个ids到我们的应用程序的URL。

总结

阅读完本文再开始使用Vue Router就会变得很容易。还有一些其他伟大的功能，你可以在官方文档中阅读它们。我希望本文足以让您开始在Vue中制作一些很酷的SPA（单页应用）！

翻译自：https://scotch.io/tutorials/getting-started-with-vue-router

2017-07-30

相关推荐

JavaScript
LineMaker-创意装饰线条布局
Animation
JavaScript
Google Grid Gallery – 使用3D变换的响应式瀑布流布局
Grid
JavaScript
Voca – JavaScript字符串库
Input
JavaScript
BLazy.js-轻量级的延迟加载图像脚本
JavaScript