vue.js路由学习笔记二

最新推荐文章于 2025-04-30 14:52:39 发布

原创最新推荐文章于 2025-04-30 14:52:39 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

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>