1.路由示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="vue.js"></script> <script src="vue-router.js"></script> </head> <body> <div id="app"> <h1>Hello App!</h1> <p> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <router-view></router-view> </div> <script> const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] const router = new VueRouter({ routes // short for `routes: routes` }) const app = new Vue({ router }).$mount('#app') </script> </body> </html>
2.动态编译示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vue complile example</title> <script src="vue.js"></script> </head> <body> <div id="demo"> </div> <script> var res = Vue.compile('<div><h1>{{title}}</h1></div>'); new Vue({ el: '#demo', data: { title: 'vue compile' }, render: res.render }); </script> </body> </html>
3.动态生成Router-Link示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="vue.js"></script> <script src="vue-router.js"></script> </head> <body> <div id="app"> <router-link to="/">Home</router-link> <dynamic-link></dynamic-link> <router-link to="/about">About</router-link> <div class="box"> <router-view></router-view> </div> </div> <script> const Home = { template: '<h1>Home</h1>' } const Content = { template: '<h1>Content</h1>' } const About = { template: '<h1>About</h1>' } Vue.component('dynamic-link', { template: "<component v-bind:is="transformed" /></component>", data() { return { text: "<router-link to="/content">Content</router-link>" } }, computed: { transformed() { return { template: this.text } } } }); const routes = [ { path: '/', component: Home }, { path: '/content', component: Content }, { path: '/about', component: About }, ] const router = new VueRouter({ routes }) const app = new Vue({ router }).$mount('#app'); //app.$router.push({ path: '/about' }); </script> </body> </html>
4.动态输出（仅为验证构想，并非正途，仅做参考）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="vue.js"></script> <script src="vue-router.js"></script> </head> <body> <div id="app"></div> <script> const NotFound = { template: '<div><p>Page not found</p></div>' }; const Home = { template: "<div><p>home page</p><a href="javascript:mout('/about')">About</a></div>" }; const About = { template: "<div><p>about page</p><a href="javascript:mout('/')">Home</a></div>" }; function getRouterPath() { var href = window.location.href; var pathName = window.location.pathname; var startIndex = href.lastIndexOf(pathName); if (href.length > startIndex + pathName.length + 1) return href.substr(startIndex + pathName.length + 1); else return "/"; } function findRoute(currentRoute) { for (var index in routes) { var route = routes[index]; if (route.path == currentRoute) return route.component; } return NotFound; } const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] const router = new VueRouter({ routes }) const app = new Vue({ router: router, data: { currentRoute: getRouterPath() }, computed: { ViewComponent() { return findRoute(this.currentRoute); } }, render(createElement) { return createElement(this.ViewComponent) } }); app.$mount('#app'); function mout(routePath) { app.$router.push({ path: routePath }); window.location.reload(); } </script> </body> </html>
4.组件之间通信(通过EventBus，其实就是一个vue对象)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>组件通信</title> <script src="vue.js"></script> <script src="vue-router.js"></script> </head> <body> <div id="app"> <com1></com1> <com2></com2> </div> <script> const eventBus = new Vue(); Vue.component('com1', { template: "<div><button @click='click'>组件1</button></div>", data() { return { } }, computed: { }, methods:{ click:function(){ eventBus.$emit("com2click", "hello com2"); } }, created() { eventBus.$on("com1click", message => { alert("com1click:" + message); }); } }); Vue.component('com2', { template: "<div><button @click='click'>组件2</button></div>", data() { return { } }, computed: { }, methods:{ click:function(){ eventBus.$emit("com1click", "hello com1"); } }, created() { eventBus.$on("com2click", message => { alert("com2click:" + message); }); } }); const app = new Vue().$mount('#app'); </script> </body> </html>