首页 > 其他 > 详细

[Vue] Get up and running with vue-router

时间:2017-02-06 20:45:16      阅读:225      评论:0      收藏:0      [点我收藏+]

How do we set up a simple app with its own routes with their own components in Vue?

 

Install:

npm i --save vue-router

 

Define routers:

import Vue from vue
import Router from vue-router

Vue.use(Router)

import Armenian from ../components/Armenian.vue
import Chinese from ../components/Chinese.vue
import Greek from ../components/Greek.vue

export default new Router({
  mode: history,
  routes: [{
    path: /armenian,
    component: Armenian
  }, {
    path: /chinese,
    component: Chinese
  }, {
    path: /greek,
    component: Greek
  }]
})

 

Navgiation:

<template>
  <div id="app">
    <header>
      <router-link to="/" exact>Lorem Ipsum in different languages</router-link>
    </header>
    <nav>
      <ul>
        <li>
          <router-link to="/armenian">Armenian</router-link>
        </li>
        <li>
          <router-link to="/chinese">Chinese</router-link>
        </li>
        <li>
          <router-link to="/greek">Greek</router-link>
        </li>
      </ul>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: App
  }
</script>

<style>
  .router-link-active {
    color: turquoise
  }
</style>

 

[Vue] Get up and running with vue-router

原文:http://www.cnblogs.com/Answer1215/p/6371567.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!