vue学习：7、路由跳转
生活随笔
收集整理的這篇文章主要介紹了
vue学习：7、路由跳转
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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>?
轉載于:https://my.oschina.net/qingqingdego/blog/2873891
總結
以上是生活随笔為你收集整理的vue学习：7、路由跳转的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 圆平移后的方程变化_1.1 直角坐标系中
- 下一篇： 深入vuex原理(上)