vue.js路由学习笔记

Vue.js路由实践

原创于 2019-02-03 00:34:00 发布 · 152 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用Vue.js和Vue-router实现的基本路由应用实例，包括页面导航链接和视图组件的展示，适合初学者理解Vue.js路由的工作原理。

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>