vue.js路由学习笔记

时间：2022-02-23 01:28:22
<!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>

vue.js路由学习笔记

特别注意版本,之前学习时候是2.0.1,后来改了版本,发觉不可以i用了,等过几天进行更新下学习下

相关文章