Vue.js 的單網頁應用程式(SPA, Single Page Application)

安裝 router

npm install --save vue-router

引入

// ./src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

設計

假設有三個頁面:
* Home

<!-- ./src/components/Home.vue -->
<template>
  <div>
    <div class="title">
      <h1>{{msg}}</h1>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'home',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>
  • Admin 頁面
<!-- ./src/pages/Admin.vue -->
<template>
  <div>
    <div class="title">
      <h1>{{msg}}</h1>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'home',
    data () {
      return {
        msg: 'Welcome to the Admin Page'
      }
    }
  }
</script>
  • 購物車頁面
<!-- ./src/pages/Cart.vue -->
<template>
  <div>
    <div class="title">
      <h1>{{msg}}</h1>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'home',
    data () {
      return {
        msg: 'Welcome to the Cart Page'
      }
    }
  }
</script>
  • 使用 route
// ./src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';

// Moved to pages from components
import Home from '@/pages/Home';
import Cart from '@/pages/Cart';
import Admin from '@/pages/Admin';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/admin',
      name: 'Admin',
      component: Admin,
    },
    {
      path: '/cart',
      name: 'Cart',
      component: Cart,
    }
  ]
});
  • APP
<!-- ./src/App.vue -->
<template>
  <div>
    <nav>
      <div class="container">
        <ul class="nav__left">

          <!-- Navigation Links -->
          <li><router-link to="/">Home</router-link></li>
          <li><router-link to="/admin">Admin</router-link></li>
          <li><router-link to="/cart">Cart</router-link></li>

        </ul>
      </div>
    </nav>

    <router-view></router-view>
  </div>
</template>
...

Nexted Router

// src/routes/index.js
import Home from '@/pages/Home';
import Cart from '@/pages/Cart';

// Admin Components
import Index from '@/pages/admin/Index'
import New from '@/pages/admin/New'
import Products from '@/pages/admin/Products'
import Edit from '@/pages/admin/Edit'

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/cart',
      name: 'Cart',
      component: Cart
    },
    {
      path: '/admin',
      name: 'Admin',

      // Parent routes still has a component
      component: Index,

      // Child routes
      children: [
        {
          path: 'new',
          name: 'New',
          component: New
        },
        {
          path: '',
          name: 'Products',
          component: Products
        },
        {
          path: 'edit/:id',
          name: 'Edit',
          component: Edit
        }
      ]
    }
  ]
});
  • 頁面
<!-- ./src/pages/admin/Index.vue -->
<template>
  <div>
    <div class="admin-new">
      <div class="container">
        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
          <ul class="admin-menu">
            <!-- Links are to sibling routes -->
            <li><router-link to="/admin">View Products</router-link></li>
            <li><router-link to="/admin/new">New Product</router-link></li>
          </ul>
        </div>
        <!-- Outlet for children routes -->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
  • new 頁面
<!-- ./src/pages/admin/New.vue -->
<template>
  <div>
    <div class="title">
      <h1>This is Admin/New</h1>
    </div>
  </div>
</template>
  • 產品頁面
<!-- ./src/pages/admin/Products.vue -->
<template>
  <div>
    <div class="title">
      <h1>This is Admin</h1>
    </div>
  </div>
</template>
  • 編輯頁面
<!-- ./src/pages/admin/Edit.vue -->
<template>
  <div>
    <div class="title">
      <h1>This is Admin/Edit/{{$route.params.id}}</h1>
    </div>
  </div>
</template>

動態Routes

  • 取得route的參數
{
  path: 'edit/:id',
  name: 'Edit',
  component: Edit
}

// 取得參數
export default {
  created() {
    console.log(this.$route.params.id) // prints value of :id
  }
}