2019独角兽企业重金招聘Python工程师标准>>> 
<body><div id="app"></div></body><script type="text/javascript">var Login = {template: `<div>我是登陆界面</div>`};var Register = {template: `<div>我是注册界面</div>`};<!-- 2：按照插件 -->Vue.use(VueRouter);<!-- 3：创建路由对象 -->var router = new VueRouter({<!-- 4：配置路由对象 -->routes: [{ name:'login', path: '/login', component: Login}, { name:'register', path: '/register', component: Register }]});<!-- 6：指定路由改变局部的位置 -->var App = {template: `<div><!-- vue-router内置组件 --><!-- <router-link to="/login">登录去</router-link><router-link to="/register">注册去</router-link> --><!-- to 前没有冒号 就字符串处理了 --><router-link :to="{name:'login'}">登录去</router-link><router-link :to="{name:'register'}">注册去</router-link><!-- 显示跳转页面 --><router-view></router-view></div>`}new Vue({el: '#app',router: router,components: {app: App},template: '<app/>'})</script>传参与嵌套
<body><div id="app"></div></body><script type="text/javascript">// 1: router-view 中包含 router-view// 2: 路由规则中存在子路由var Login = {template: `<div>这里是Login界面,下面是子界面<hr><!-- 显示跳转页面 --><router-view></router-view></div>`,created: function() {console.log(this.$route.query);console.log(this.$route.query.id + ' ' + this.$route.query.name);}};var Register = {template: `<div>我是注册界面</div>`,created: function() {console.log(this.$route.params);console.log(this.$route.params.name);}};var Woman={template:`<div>女的</div>`}var Man={template:`<div>男的</div>`}var Boy={template:`<div>小屁孩</div>`}<!-- 2：按照插件 -->Vue.use(VueRouter);<!-- 3：创建路由对象 -->var router = new VueRouter({<!-- 4：配置路由对象 -->routes: [{<!--保证 /login 显示login组件 -->name: 'login',path: '/login',component: Login,<!-- 保证/login/abc 显示abc -->children:[{name: 'login.woman',path: 'woman',component: Woman},{name: 'login.man',path: 'man',component: Man},{name: 'login.boy',path: 'boy',component: Boy}]},{name: 'register',path: '/register/:name',component: Register}]});<!-- 6：指定路由改变局部的位置 -->var App = {template: `<div><!-- vue-router内置组件 --><!-- <router-link to="/login">登录去</router-link><router-link to="/register">注册去</router-link> --><!-- to 前没有冒号 就字符串处理了 --><!-- query:{id:1} --><!-- params:{name:'abc'} --><router-link :to="{name:'login.woman'}" >女</router-link><router-link :to="{name:'login.man'}" >男</router-link><router-link :to="{name:'login.boy'}" >小屁孩</router-link><router-link :to="{name:'login',query:{id:1,name:'ddd'}}" >登录去</router-link><router-link :to="{name:'register',params:{name:'abc'}} " >注册去</router-link><!-- 显示跳转页面 --><router-view></router-view></div>`}new Vue({el: '#app',router: router,components: {app: App},template: '<app/>'})</script>
