054——VUE中vue-router之实例讲解定义一下单页面路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router之实例讲解定义一下单页面路由:</title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>
<div id="demo">
    <router-link to="/ltphp">LTPHP</router-link>
    <router-link to="/ltcms">LTCMS</router-link>
    <router-view></router-view>
</div>
<script>
    const ltphp={
        template:"<h1>ltphp</h1>"
    }
    const ltcms={
        template:"<h1>ltcms</h1>"
    }
    let routes=[
        {path:'/ltphp',component:ltphp},
        {path:'/ltcms',component:ltcms}
    ]
    //要把组件交给路由器:
    let router=new VueRouter({routes});
    new Vue({
        el: "#demo",
        router
    });
</script>
</body>

</html>

  

posted @ 2018-01-15 17:12  生如逆旅,一苇以航  阅读(300)  评论(0编辑  收藏  举报