定义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>