vue.js路由学习笔记

最新推荐文章于 2022-02-04 14:34:28 发布

菩提树下的丁春秋

最新推荐文章于 2022-02-04 14:34:28 发布

阅读量108

点赞数

本文链接：https://blog.csdn.net/maxchenBug/article/details/88153592

版权

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/2.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>
            <div>
                <router-view></router-view>
            </div>
            
        </div>
        
    </body>
    <script>
        var Home={
            template:'<h3>我是主页</h3>'
        };
        var News={
            template:'<h3>我是新闻</h3>'
        };
        
        var router =new VueRouter({
            routes :[
                {path:'/home',component:Home},
                {path:'/news',component:News},
                ]
            
        });
        
        new Vue({
            router,
            el:'#app'
            
        });
    </script>
</html>