码迷,mamicode.com
首页 > 其他好文 > 详细

[Vue] Get up and running with vue-router

时间:2017-02-06 20:47:43      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:ade   app   class   span   com   avg   port   efault   head   

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

标签:ade   app   class   span   com   avg   port   efault   head   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!