11、vue.js 之路由

来源：互联网发布：投资网络电影赚钱吗编辑：程序博客网时间：2024/06/05 06:05

路由简单示例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <meta name="keywords" content="hehe"/>    <meta name="description" content="hehe"/>    <script src="https://unpkg.com/vue/dist/vue.js"></script><!--引入vue.js-->    <script src="js/vue-router.min.js"></script>  <!--引入vue-router.js--></head><body>    <div id="app"></div>    <script>        /*app模板 可看着整个页面的总模板  用来渲染路由*/        var App = Vue.component('app',{            template: `<div id="app">                           <router-view></router-view> /*路由视图*/                        </div>`        });        /*home模板*/        var home = Vue.component('home',{            template: '<div><h1>{{content}}</h1></div>',            data:function () {                return {content:'这里是home'}            }        });        /*about模板*/        var about = Vue.component('about',{            template: '<div><h1>{{content}}</h1></div>',            data:function () {                return {content:'这里是about'}            }        });        /*路由*/        var router = new VueRouter({            routes:[                {path:'/home',component:home},/*  /home 的时候渲染home模板   */                {path:'/about',component:about}/*  /about 的时候渲染about模板   */            ]        });        new Vue({            el: '#app',            router,//路由            render: h => h(App)//render  页面默认的时候显示的是render指定模块的内容，此处代表默认显示App模块的内容        })    </script></body></html>

运行效果：

阅读全文

1 0