码迷,mamicode.com
首页 > 其他好文 > 详细

Vue路由的使用简单实例

时间:2020-06-14 20:18:04      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:单实例   mount   创建   body   vuerouter   class   ack   使用   har   

一、导入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>

 

Vue路由的使用简单实例

标签:单实例   mount   创建   body   vuerouter   class   ack   使用   har   

原文地址:https://www.cnblogs.com/dilireba/p/13126639.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!