Vue路由的使用简单实例

一、导入vue.js和vue.router.js，一定要先导入vue.js
二、代码
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
    <body>
        <div id="app">
            <router-link to="/menu1">第一句</router-link>
            <router-link to="/menu2">第二句</router-link>
            <router-link to="/menu3">第三句</router-link>
            <router-link to="/menu4">第四句</router-link>
            <!-- 路由出口 -->
            <router-view></router-view>
        </div>
        <template id="menu1">
            <h1>床前明月光</h1>
        </template>
        <template id="menu2">
            <h1>疑是地上霜</h1>
        </template>
        <template id="menu3">
            <h1>举头望明月</h1>
        </template>
        <template id="menu4">
            <h1>低头思故乡</h1>
        </template>
    </body>
    <script type="text/javascript">
        //1、定义路由组件
        const menu1={template:"#menu1"};
        const menu2={template:"#menu2"};
        const menu3={template:"#menu3"};
        const menu4={template:"#menu4"};
        //2、定义路由
        const routers=[
                        {path:"/menu1",component:menu1},
                        {path:"/menu2",component:menu2},
                        {path:"/menu3",component:menu3},
                        {path:"/menu4",component:menu4}
                        ];
        //3、创建router然后使用routers的配置
        const router=new VueRouter({
            routes:routers
        })
        //4、创建和挂载根实例
        var vue=new Vue({
            router
        }).$mount("#app");
    </script>