zoukankan      html  css  js  c++  java
  • [Vue] Get up and running with vue-router

    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>
  • 相关阅读:
    【bzoj2006】超级钢琴
    【bzoj4940】这是我自己的发明
    【arc076E】Connected?
    【agc004C】AND Grid
    选举
    几何
    打击目标
    【CF Gym100228】Graph of Inversions
    【CodeChef】Chef and Graph Queries
    大包子玩游戏
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6371567.html
Copyright © 2011-2022 走看看