本篇是是vue路由的開篇，會以一個簡單的demo對vue-router進行一個介紹，主要覆蓋以下幾個常用場景：

1、路由跳轉(zhuǎn)

2、嵌套路由

3、路由參數(shù)

 

1、Vue-Router

　　一般來說，路由定義就是定義地址訪問規(guī)則，然后由路由引擎根據(jù)這些定義的規(guī)則去查找對應(yīng)的頁面，并轉(zhuǎn)發(fā)請求給頁面進行處理；對于后端來說就是這么一個模式，但前端不同，前端路由變化也只是頁面內(nèi)的導(dǎo)航比如angular中的模版切換，比如vue和react中的component切換，這種方式都是基于瀏覽器hash模擬url跳轉(zhuǎn)。

　　vue-router是官方提供的一套路由工具庫，基于component的路由配置引入都非常簡單，最常用的是兩個指令：router-view 和 router-link，router-view用來提供占位，router-link提供路由鏈接，對于這兩個指令的介紹，我們可以直接通過demo介紹。接下來我們以傳統(tǒng)方式引入vue-router：

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue-demo2</title>
    <script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.js"></script>
    <link href="./css/layui.css" rel="stylesheet"></head><body>
    <div id="app">
       
    </div></body>

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

2、路由跳轉(zhuǎn)

　　對我們的demo做一下簡單介紹，demo包含：首頁、新聞列表、關(guān)于三個模塊；其中新聞列表包含最新新聞、歷史新聞；每個新聞題目單擊時，可查看其詳情頁。

　　ok，第一步，我們實現(xiàn)基本的路由跳轉(zhuǎn)，單擊各個模塊，分別打開對應(yīng)“頁面”，可以按照如下幾個步驟處理：

　　1、創(chuàng)建模塊組件

　　2、創(chuàng)建路由對象，配置路由組件映射關(guān)系

　　3、編寫路由鏈接和容器

　　4、啟用路由

　　首先，按照上述第一個步驟，我們需要創(chuàng)建三個模塊組件：HomeComponent，NewsComponent，AboutComponent：

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

        var HomeComponent = {
            template: '<div>Home</div>'
        };        var NewsComponent = {
            template: '<div>News</div>'
        };        var AboutComponent = {
            template: '<div>About</div>'
        };

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

　　第二步，配置路由組件映射關(guān)系：

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

  router = 'home', path: '/home''news', path: '/news''about', path: '/about'

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

　　其中name表示一個具名路由，在創(chuàng)建路由鏈接的時候可以以path作為路徑，也支持直接使用name作為跳轉(zhuǎn)依據(jù)，但是path如果改變了，需要多個地方引入的path進行調(diào)整。

　　第三步，編寫路由鏈接和容器，這里就是router-link和router-view指令的使用了，配置三個路由分別對應(yīng)上面代碼添加的三個路由（這里引入了layerui作為基礎(chǔ)樣式）

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

<div>
            <ul class="layui-nav">
                <router-link :to="{name:'home'}" tag='li' class="layui-nav-item"><a href="">首頁</a></router-link>
                <router-link :to="{name:'news'}" tag='li' class="layui-nav-item"><a href="">新聞列表</a></router-link>
                <router-link :to="{name:'about'}" tag='li' class="layui-nav-item"><a href="">聯(lián)系我們</a></router-link>
            </ul>
            <div class="layer-form">
                <router-view></router-view>
            </div>
        </div>

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

　　其中to要寫成:to，因為參數(shù)是對象，而不是一個字符串，tag表示router-link渲染的目標(biāo)標(biāo)簽，這里表示渲染成li標(biāo)簽。

　　第四步，路由啟用，路由模塊可以深度集成到Vue實例中，集成方式如下：

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

 var app = new Vue({
            el: '#app',
            template: `            <div>
                <ul class="layui-nav">
                    <router-link :to="{name:'home'}" tag='li' class="layui-nav-item " extract><a href="">首頁</a></router-link>
                    <router-link :to="{name:'news'}" tag='li' class="layui-nav-item"><a href="">新聞列表</a></router-link>
                    <router-link :to="{name:'about'}" tag='li' class="layui-nav-item"><a href="">聯(lián)系我們</a></router-link>
                </ul>
                <div class="layer-form">
                    <router-view></router-view>
                </div>
            </div>            `,
            router: router
        })

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

此時完整代碼如下：

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn) View Code

瀏覽器打開運行，可見如圖效果：

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

　　在運行過程中，我們發(fā)現(xiàn)有一點體驗不好的地方，在初始化頁面時，頁面路徑為#/時，并沒有加載任何組件，因為我們沒有配置任何一個路由path為‘／’，針對這種情況，可以增加一條路由規(guī)則，當(dāng)路由為/時，跳轉(zhuǎn)到默認路由;修改路由配置部分代碼如下即可：

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

 routes: [                {path:'/',redirect:'/home'},
                { name: 'home', path: '/home', component: HomeComponent },
                { name: 'news', path: '/news', component: NewsComponent },
                { name: 'about', path: '/about', component: AboutComponent }
            ]

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

2、嵌套路由

　　現(xiàn)在模塊之間跳轉(zhuǎn)已經(jīng)OK，但是對于新聞列表，需要包含最新列表和歷史列表，這是在新聞列表模塊下，但是模式和外層路由一樣，還是按照我們的步驟來。

　　第一步，創(chuàng)建路由組件，這里是最新新聞列表和歷史新聞列表：

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

 var LatestNewsComponent = {
            template: '<div>Latest News</div>'
        }        var HistoryNewsComponent = {
            template: '<div>History News</div>'
      }

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

 　　第二步，配置組件和路由映射關(guān)系：

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

 var router = new VueRouter({
            linkActiveClass: 'layui-this',
            routes: [
                { path: '/', redirect: '/home' },
                { name: 'home', path: '/home', component: HomeComponent },
                {
                    name: 'news', path: '/news', component: NewsComponent,                    children: [
                        { path: '', redirect: 'latest' },//默認路由
                        { name: 'latest-news', path: 'latest', component: LatestNewsComponent },
                        { name: 'history-news', path: 'hisotry', component: HistoryNewsComponent }
                    ]
                },
                { name: 'about', path: '/about', component: AboutComponent }
            ]
        })

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

　　第三步，編寫路由鏈接和路由容器，在這里修改NewsComponent：

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

var NewsComponent = {
            template: `            <div style="margin-top:5px"> 
                <ul class="layui-nav layui-nav-tree">
                    <router-link :to="{name:'latest-news'}" class="layui-nav-item" tag="li">最新消息</router-link>
                    <router-link :to="{name:'history-news'}" class="layui-nav-item" tag="li">歷史消息</router-link>
                </ul>
                <div>
                    <router-view></router-view>
                </div>
            </div>`
        };

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

　　第四步，啟用路由，這個在配置基本路由的時候已經(jīng)啟用，此處忽略此步驟即可，刷新運行（不要在乎頁面容顏，看功能，??）：

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

3、路由參數(shù)

　　在web開發(fā)中，頁面之間傳遞參數(shù)是最常見的業(yè)務(wù)場景，所以必不可少的前端路由也支持參數(shù)傳遞，有地方稱這種路由為動態(tài)路由，無論什么名稱，其實就是配置參數(shù)傳遞規(guī)則，針對我我們的demo，在最新新聞列表中，點擊記錄，訪問到詳情頁，這時候我們就需要傳遞一個動態(tài)的記錄id來確定具體是哪一條新聞，這種配置方式和angular-uirouter中的配置一樣，還是按照我們上述步驟一步一步來：

　　第一步，創(chuàng)建組件新聞明細組件：

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

 var NewsDetailComponent = {
            template: '<div>新聞編號為{{id}}</div>',
            data: function () {                return {
                    id: '',
                }
            },
            created: function () {                this.id = this.$route.params.id;
            }
        }

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

路由對象啟用后，$route對象注入到了component中，在任何組件中都可以訪問，created方法是component生命周期方法，故名可思意，具體可查文檔，一般用于初始化數(shù)據(jù)；

　　接著來添加路由規(guī)則：

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

 var router = new VueRouter({
            linkActiveClass: 'layui-this',
            routes: [
                { path: '/', redirect: '/home' },
                { name: 'home', path: '/home', component: HomeComponent },
                {
                    name: 'news', path: '/news', component: NewsComponent,
                    children: [
                        { name: 'latest-news', path: 'latest', component: LatestNewsComponent },
                        { name: 'history-news', path: 'hisotry', component: HistoryNewsComponent },                        { name: 'news-detail', path: ':id', component: NewsDetailComponent }
                    ]
                },
                { name: 'about', path: '/about', component: AboutComponent }
            ]
        })

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

　　修改最新news組件，添加路由鏈接：

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

var LatestNewsComponent = {
            template: `<ul>
            <router-link tag='li' v-for="n in news" :key="n.id" :to="{name:'news-detail',params:{id:n.id}}">{{n.title}} </router-link>
            
            </ul>`,
            data: function () {                return {
                    news: [
                        { id: '1', title: 'news 1' },
                        { id: '2', title: 'news 2' },
                        { id: '3', title: 'news 3' }
                    ]
                }
            }
        }

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

刷新頁面并運行結(jié)果如下圖所示：

Android培訓(xùn),安卓培訓(xùn),手機開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

4、小結(jié)

　　本篇只是對vue-router中最常用最簡單的部分做了一下介紹，其實其中包含了另外好多沒有介紹到的內(nèi)容，比如路由生命周期，比如路由最大的話的組件重用處理，比如路由模式等等，這些。這些多了解一些的，可以直接去官方文檔查看，這里也只是拋磚引玉，先介紹常用的或者后期會用到的，其它的部分根據(jù)情況添加，這篇到此為止，下篇接著學(xué)習(xí)router部分。。。

http://www.cnblogs.com/Johnzhang/p/7231589.html