vue.js路由学习笔记二 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
        
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
    </head>
    <body>
        <div id ="app">
            <div>
                <router-link to="/home">主页</router-link>
                <router-link to="/news">新闻</router-link>
            </div>
        
                <router-view></router-view>
            
            
        </div>
        
    </body>
    <script>
        var Home=Vue.extend({
            template:'<h3>我是主页</h3>'
        });
        var News=Vue.extend({
            template:'<h3>我是新闻</h3>'
        });
        
        var router =new VueRouter({
            routes :[
                {path:'/home',component:Home},
                {path:'/news',component:News},
                {path:'/',component:Home}
            ]
            
        });
        
        var vm=new Vue({
            router
            
        }).$mount('#app');
    </script>
</html>

运行结果:

 

posted @ 2019-02-03 00:55  菩提树下的丁春秋  阅读(238)  评论(0)  编辑  收藏  举报