• 單頁Web應用（single page web application，SPA），就是隻有一張Web頁面的應用。單頁應用程式 (SPA) 是載入單個HTML 頁面並在使用者與應用程式互動時動態更新該頁面的Web應用程式。   瀏覽器一開始會載入必需的HTML、CSS和JavaScript，所有的操作都在這張頁面上完成，都由JavaScript來控制。因此，對單頁應用來說模組化的開發和設計顯得相當重要。
• 特點

1. 速度：更好的使用者體驗，讓使用者在web app感受native app的速度和流暢，
2. ·MVVM：經典MVVM開發模式，前後端各負其責。
3. ·ajax：重前端，業務邏輯全部在本地操作，資料都需要通過AJAX同步、提交。
4. ·路由：在URL中採用#號來作為當前檢視的地址,改變#號後的引數，頁面並不會過載

第一步：建立元件模板

const Index = {
    template: `
        <div>首頁</div>
    `
}
const  Find = {
    template: `
        <div>發現</div>
    `
}
const  Nearby = {
    template: `
        <div>附近</div>
    `
}
const  Order = {
    template: `
        
 
<div>訂單</div>
    `
}
const  My = {
    template: `
        <div>我的</div>
    `
}

第二部 ，配置路由

const routes = [
    {
       path:'/',
       component: Index 
    },
    {
       path:'/find',
       component: Find 
    },
    {
       path:'/nearby',
       component: Nearby 
    },
    {
       path:
 
'/order',
       component: Order 
    },
    {
       path:'/my',
       component: My 
    },

]

 第三部 建立路由物件

const router = new VueRouter({
    routes: routes,
    linkExactActiveClass: 'active'
});

 第四部 將router當今vue

const app = new Vue({
      el: '#app',
      // router: router
      router
 })

 第五部模板

<div id="app">
    <header>美團外賣</header>
    <router-view></router-view>
    <nav>
      <router-link to="/">首頁</router-link>
      <router-link to="/nearby">附近</router-link>
      <router-link to="/find">發現</router-link>
      <router-link to="/order">訂單</router-link>
      <router-link to="/my">我的</router-link>
    </nav>
</div>