淺談Vue-router使用方法及動態路由和巢狀路由的使用

大溼兄發表於2018-08-04
Vue路由巢狀

前言

        大家好啊，有一週不見了，還是晚了一些因為這幾天有事所以耽擱了。好了大家不要在意這些今天要講的就是Vue-router，下面進入正題。

淺談Vue-router使用方法

        下面看看Vue-router官網對它的介紹吧，Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度整合，讓構建單頁面應用變得易如反掌。

        是不是很明白，說白了就是對路由的管理以及對跳轉元件之間的管理，好了不能說的這麼多，大家想要理解還是去看官方文件吧，今天需要講的內用有些多，所以就不在這浪費時間了。

        下面上程式碼

//安裝Vue-router
npm install vue-router --save
cnpm install vue-router --save
複製程式碼

        安裝之後當然是配置Vue-router了，現在我們在src資料夾下建立一個資料夾命名為router，裡面建立index.js，另外裡面這樣寫。

//引入Vue-router檔案
import Vue from 'vue'
import Router from 'vue-router'
//把Vue-router引入
Vue.use(Router)
export default new Router({
    routes: [
    
    ]
})
複製程式碼

        在main.js中引用Vue-router

...
import router from './router'
...
...
new Vue({
...
router
...
})
...
複製程式碼

        現在我們實現一個，簡單的Vue-router，先新建一個homepage.vue,在index中引入

import Vue from 'vue'
import Router from 'vue-router'
//在這裡引入
import homepages from '../homepage/homepage'
Vue.use(Router)
export default new Router({
    routes: [
    //這裡就引入成功了
        {path:'homepages',name:'Homepages',component:homepages}
    ]
})
複製程式碼

        啟動 npm run dev在瀏覽器上檢視http://localhost:8080/homepages就能檢視到

        下面介紹Vue-router跳轉，跳轉有幾種方式接下來一一介紹

//第一種router-link跳轉
<router-link :to="{name:'Homepages'}">首頁</router-link>
//第二種router.push跳轉
this.$router.push({path: '/homepages'})
//第三種返回方法
this.$router.go(-1)
複製程式碼

        比較基本的就是這幾種跳轉方式。想要看更多跳轉方式請到官網去看api。

        Vue-router跳轉路由

        既然講了跳轉方法那我就把巢狀路由以及巢狀路由的跳轉講講吧

巢狀路由

        先看看官網的介紹吧，實際生活中的應用介面，通常由多層巢狀的元件組合而成，藉助 vue-router，使用巢狀路由配置，就可以很簡單地表達這種關係。

        既然要講巢狀路由就先把該建的vue檔案建立出來，首先建立Notlogin.vue用來成放login的整體元件在index中這樣寫

...
import Notlogin from '../login/Notlogin'
...
export default new Router({
    routes: [
    //這樣就是巢狀路由的呈現方式
         {path:'/loginregistration',redirect:'/loginregistration',component:Notlogin,children:[
         
            ]
         }
    ]
})
複製程式碼
//Notlogin.vue
<template>
    <div>
       <router-view/>
    </div>
</template>
複製程式碼

        這樣就引入成功，之後建立login.vue

<template>

</template>
<script>
    export default {
        name:'login',
        data:function () {
        
        }
    }
</script>    
複製程式碼

         在index中引入

...
import Notlogin from '../login/Notlogin'
import Login from '../login/Login'
...
export default new Router({
    routes: [
    //這樣就是巢狀路由的呈現方式
         {path:'/loginregistration',redirect:'/loginregistration',component:Notlogin,children:[
            {path: 'login', name: 'Login', component: Login},
         ]
         }
    ]
})
複製程式碼

        先說一下redirect是重新定向對跳轉其他模組組建非常管用，大家可以查查怎麼用的，這裡就不過多闡述了。接下來建立pageshome_view.vue盛放homepages.vue形成homepages的巢狀路由

import pageshome_view from  '../pages/pageshome_view'
import homepages from '../homepage/homepage'
import Notlogin from '../login/Notlogin'
import Login from '../login/Login'
...
export default new Router({
    routes: [
        {path:'/',redirect:'/homepages',component:pageshome_view,children:[
            {path:'homepages',name:'Homepages',component:homepages},
        ]},
         {path:'/loginregistration',redirect:'/loginregistration',component:Notlogin,children:[
            {path: 'login', name: 'Login', component: Login},
         ]
         }
    ]
})
複製程式碼

        這樣就好了完成了一個巢狀路由，接下來看看跳轉

//homepages.vue
<template>
    <div>
     <router-link :to="{ name: 'Login'}">登入</router-link>
    </div>
</template>   
複製程式碼

        這樣就能跳轉到login.vue了，下面講講動態路由傳參

動態路由傳參

        先看看官網怎麼說的，我們經常需要把某種模式匹配到的所有路由，全都對映到同個元件。例如，我們有一個 User 元件，對於所有 ID 各不相同的使用者，都要使用這個元件來渲染。那麼，我們可以在 vue-router 的路由路徑中使用“動態路徑引數”(dynamic segment) 來達到這個效果。

        現在我們知道了可以通過動態路由傳參，但是怎麼去傳參就要看，具體的方式了。先講一個簡單的方式，不講複雜的方式，先上程式碼。

//homepages.vue
<template>
    <div>
     <router-link :to="{ name: 'Login',params :{ids:Logins}}">登入</router-link>
    </div>
</template> 
複製程式碼
//index.js
import pageshome_view from  '../pages/pageshome_view'
import homepages from '../homepage/homepage'
import Notlogin from '../login/Notlogin'
import Login from '../login/Login'
...
export default new Router({
    routes: [
        {path:'/',redirect:'/homepages',component:pageshome_view,children:[
            {path:'homepages',name:'Homepages',component:homepages},
        ]},
         {path:'/loginregistration',redirect:'/loginregistration',component:Notlogin,children:[
            {path: 'login/:ids', name: 'Login', component: Login},
         ]
         }
    ]
})
複製程式碼

        上面可以看到/:ids這個這個東西就是我們需要傳的引數。

//login.vue
<template>
    <div>
    {{logoin_size}}
    </div>
</template>
<script>
    export default {
        name:'login',
        data:function () {
            return{
            
            }
        },
        created(){
            this.logoin_size=this.$route.params.ids
        }
    }
複製程式碼

        我們通過params傳參那麼，我們就要通過params接受傳過來的引數，當然params還是能帶多個引數的所以不必擔心。

        說了這麼多，不知道大家是否理解了,寫的有些匆忙還請大家不要有意見，畢竟我還有自己的事情，但是還是希望大家能批評指正我的不足之處，謝謝。

相關文章