定義Vue的路由

1.引包

<script src="./vue-router/dist/vue-router.js"></script>

2.定義組件

const user = {
           template:`<div>這是用戶管理組件</div>`
        }
        const supplier = {
           template:`<div>這是供應商管理組件</div>`
        }
        const finance = {
           template:`<div>這是財務管理組件</div>`
        }

3.定義路由

 const router = new VueRouter({
         routes:[
         {path:"/users",component:user},
         {path:"/suppliers",component:supplier},
         {path:"/finances",component:finance}
         ]
     })

4.添加路由的出口

 <router-view></router-view>

5.完整代碼

    <div id="app">
        <div><h1>頭部模塊</h1></div>
        <div>
            <ul>
                <li><router-link to="/users">用戶管理</router-link></li>
                <li><router-link to="/suppliers">供應商管理</router-link></li>
                <li><router-link to="/finances">財務管理</router-link></li>
            </ul>
        </div>
                    <router-view></router-view>
    </div>
    <script src="./vue/dist/vue.js"></script>
    <script src="./vue-router/dist/vue-router.js"></script>
    <script>
        const user = {
           template:`<div>這是用戶管理組件</div>`
        }
        const supplier = {
           template:`<div>這是供應商管理組件</div>`
        }
        const finance = {
           template:`<div>這是財務管理組件</div>`
        }
     const router = new VueRouter({
         routes:[
         {path:"/users",component:user},
         {path:"/suppliers",component:supplier},
         {path:"/finances",component:finance}
         ]
     })

    var vm = new Vue({
    el: '#app',
    router
    })
    </script>