http://router.vuejs.org/zh-cn/

動(dòng)態(tài)路由匹配（路由傳參）

我們經(jīng)常需要把某種模式匹配到的所有路由，全都映射到同個(gè)組件。例如，我們有一個(gè) User 組件，對于所有 ID 各不相同的用戶，都要使用這個(gè)組件來渲染。那么，我們可以在 vue-router 的路由路徑中使用『動(dòng)態(tài)路徑參數(shù)』（dynamic segment）來達(dá)到這個(gè)效果：

const router = new VueRouter({
    routes: [
        { path: '/user/:id', component: User }
    ]
})

現(xiàn)在呢，像 /user/foo 和 /user/bar 都將映射到相同的路由。

傳參

在需要進(jìn)行頁面跳轉(zhuǎn)傳值的地方，傳遞參數(shù)，在子路由頁面中可以接收到

使用router-link標(biāo)簽的to屬性進(jìn)行參數(shù)的傳遞

聲明式傳參數(shù) <router-link to="..."></router-link>

<li v-for="(item, index) in data">
    <router-link :to="'/user/' + item.activity.name">
        <img :src="item.activity.img" :style="{ width: '200px' }" alt="">
        <p>{{ item.activity.name }}</p>
    </router-link>
</li>

編程式傳參 $router.push()

<li v-for="(item, index) in data" @click="push(item.activity)">
    <img :src="item.activity.img" :style="{ width: '200px' }" alt="">
    <p>{{ item.activity.name }}</p>
</li>

push(item) {
    // 在方法中進(jìn)行路由跳轉(zhuǎn)，并傳遞參數(shù)
    // this.$router.push('/listdetail/' + item.name)
    
    // 帶查詢參數(shù)，變成 /listdetail/abc?plan=private
    this.$router.push({
        path: '/listdetail/' + item.name, // 路徑
        query: { // 查詢參數(shù)
            plan: 'private'
        }
    })
}

接參

使用$route.params屬性接收參數(shù)

<template lang="html">
    <div id="list-detail">
        <!-- 在模板中直接接收 -->
        <h2>{{ $route.params.id }}</h2>
        <h2>{{ id }}</h2>
    </div>
</template>

<script>
export default { 
    data() {
        return { // 在數(shù)據(jù)中接收
            id: this.$route.params.id
        }
    }
}
</script>

返回按鈕

使用history.back()可以返回上一頁

注意：不可以直接寫在@click中，需要寫在methods內(nèi)部

<button @click="back">返回</button>

methods: {
    back() {
        history.back()
    }
}

響應(yīng)路由參數(shù)的變化

提醒一下，當(dāng)使用路由參數(shù)時(shí)，例如從 /user/foo 導(dǎo)航到 user/bar，原來的組件實(shí)例會被復(fù)用。因?yàn)閮蓚€(gè)路由都渲染同個(gè)組件，比起銷毀再創(chuàng)建，復(fù)用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調(diào)用。

復(fù)用組件時(shí)，想對路由參數(shù)的變化作出響應(yīng)的話，你可以簡單地 watch（監(jiān)測變化） $route 對象：

watch: {
    '$route' (to, from) {
        // 對路由變化作出響應(yīng)...
    }
}

命名路由的使用

在定義路由的時(shí)候，可以定義一個(gè)name屬性，后續(xù)使用會很方便

const routes = [
    { name: 'home', path: '/home', component: Home }
]

路由跳轉(zhuǎn)時(shí)，可以直接使用name屬性

<!-- 聲明式 -->
<router-link :to="{ name: 'home' }">Home</router-link>

// 編程式
this.$router.push({
    name: 'home'
})

命名視圖

有時(shí)候想同時(shí)（同級）展示多個(gè)視圖，而不是嵌套展示，例如創(chuàng)建一個(gè)布局，有 sidebar（側(cè)導(dǎo)航） 和 main（主內(nèi)容） 兩個(gè)視圖，這個(gè)時(shí)候命名視圖就派上用場了。你可以在界面中擁有多個(gè)單獨(dú)命名的視圖，而不是只有一個(gè)單獨(dú)的出口。如果 router-view 沒有設(shè)置名字，那么默認(rèn)為 default。

<router-view class="a" name="a"></router-view>
<router-view class="b" name="b"></router-view>

一個(gè)視圖使用一個(gè)組件渲染，因此對于同個(gè)路由，多個(gè)視圖就需要多個(gè)組件。確保正確使用 components 配置（帶上 s）：

const routes = [
    { path: '/mine', component: Mine, children: [
        { path: '', component: One },
        { path: 'one', components: {
            a: One,
            b: Two
        }},
        { path: 'two', components: {
            a: Two,
            b: One
        } },
    ]}
]

HTML5 History模式

vue-router 默認(rèn) hash 模式 —— 使用 URL 的 hash 來模擬一個(gè)完整的 URL，于是當(dāng) URL 改變時(shí)，頁面不會重新加載。

如果不想要很丑的 hash，我們可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉(zhuǎn)而無須重新加載頁面。

const router = new VueRouter({
    mode: 'history',
    routes: [...]
})

匹配其它錯(cuò)誤路由

const routes = [
    { path: '*', component: NotFound }
]

導(dǎo)航鉤子

讓我們清楚的知道路由的跳轉(zhuǎn)順序

// 導(dǎo)航鉤子
router.beforeEach((to, from, next) => {
    console.log(to); // 要進(jìn)入的路由
    console.log(from); // 要離開的路由
    next()
})

// 路由跳轉(zhuǎn)之后
router.afterEach(router => {
    console.log(router)
})

某個(gè)路由獨(dú)享的鉤子

export default {
    name: 'mine',
    beforeRouteEnter(fo, from, next) {
        next(vm => {
            // 當(dāng)前組件的實(shí)例
            console.log(vm);
        })
        // 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用
        // 不！能！獲取組件實(shí)例 `this`
        // 因?yàn)楫?dāng)鉤子執(zhí)行前，組件實(shí)例還沒被創(chuàng)建
        console.log('beforeRouteEnter');
    },
    beforeRouteUpdate(to, from, next) {
        next()
        // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
        // 舉例來說，對于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候，
        // 由于會渲染同樣的 Foo 組件，因此組件實(shí)例會被復(fù)用。而這個(gè)鉤子就會在這個(gè)情況下被調(diào)用。
        // 可以訪問組件實(shí)例 `this`
        console.log('beforeRouteUpdate');
    },
    beforeRouteLeave(to, from, next) {
        next()
        // 導(dǎo)航離開該組件的對應(yīng)路由時(shí)調(diào)用
        // 可以訪問組件實(shí)例 `this`
        console.log('beforeRouteLeave');
    }
}

數(shù)據(jù)獲取

導(dǎo)航完成后獲取數(shù)據(jù)

當(dāng)你使用這種方式時(shí)，我們會馬上導(dǎo)航和渲染組件，然后在組件的 created 鉤子中獲取數(shù)據(jù)。這讓我們有機(jī)會在數(shù)據(jù)獲取期間展示一個(gè) loading 狀態(tài)，還可以在不同視圖間展示不同的 loading 狀態(tài)。

<template>
    <div id="market">
        <div class="loading" v-if="loading">
            <h1>Loading</h1>
        </div>

        <div class="error" v-if="error">
            <h1>Error</h1>
        </div>

        <div class="content" v-if="market">
            <h1>market</h1>
            <hr>
            <list :url="url" category="menu"></list>
        </div>
    </div>
</template>

<script>
import List from '../components/List'
export default {
    name: 'market',
    data() {
        return {
            url: 'http://www.vrserver.applinzi.com/aixianfeng/apihome.php',
            loading: false,
            error: null,
            market: null
        }
    },
    components: { List },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData() {
            this.loading = true
            setTimeout(() => {
                console.log(this);
                this.loading = false
                this.market = true
            }, 1000);
        }
    }
}
</script>

<style>
#market h1 {
    color: purple;
}
</style>

當(dāng)前tabbar的選中效果

<router-link> 組件支持用戶在具有路由功能的應(yīng)用中（點(diǎn)擊）導(dǎo)航。 通過 to 屬性指定目標(biāo)地址，默認(rèn)渲染成帶有正確鏈接的 <a> 標(biāo)簽，可以通過配置 tag 屬性生成別的標(biāo)簽.。另外，當(dāng)目標(biāo)路由成功激活時(shí)，鏈接元素自動(dòng)設(shè)置一個(gè)表示激活的 CSS 類名。

只需要在app.vue中添加樣式即可

<router-link to="/home" tag="li"></router-link>

/* 當(dāng)前被點(diǎn)擊的router-link會自動(dòng)添加router-link-active類名 */
.router-link-active {
    background-color: hotpink;
}