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

动态路由匹配（路由传参）

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用『动态路径参数』（dynamic segment）来达到这个效果：

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

现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。

传参

在需要进行页面跳转传值的地方，传递参数，在子路由页面中可以接收到

使用router-link标签的to属性进行参数的传递

声明式传参数 <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) {
    // 在方法中进行路由跳转，并传递参数
    // this.$router.push('/listdetail/' + item.name)
    
    // 带查询参数，变成 /listdetail/abc?plan=private
    this.$router.push({
        path: '/listdetail/' + item.name, // 路径
        query: { // 查询参数
            plan: 'private'
        }
    })
}

接参

使用$route.params属性接收参数

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

<script>
export default { 
    data() {
        return { // 在数据中接收
            id: this.$route.params.id
        }
    }
}
</script>

返回按钮

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

注意：不可以直接写在@click中，需要写在methods内部

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

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

响应路由参数的变化

提醒一下，当使用路由参数时，例如从 /user/foo 导航到 user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch（监测变化） $route 对象：

watch: {
    '$route' (to, from) {
        // 对路由变化作出响应...
    }
}

命名路由的使用

在定义路由的时候，可以定义一个name属性，后续使用会很方便

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

路由跳转时，可以直接使用name属性

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

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

命名视图

有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

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

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 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 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

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

匹配其它错误路由

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

导航钩子

让我们清楚的知道路由的跳转顺序

// 导航钩子
router.beforeEach((to, from, next) => {
    console.log(to); // 要进入的路由
    console.log(from); // 要离开的路由
    next()
})

// 路由跳转之后
router.afterEach(router => {
    console.log(router)
})

某个路由独享的钩子

export default {
    name: 'mine',
    beforeRouteEnter(fo, from, next) {
        next(vm => {
            // 当前组件的实例
            console.log(vm);
        })
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当钩子执行前，组件实例还没被创建
        console.log('beforeRouteEnter');
    },
    beforeRouteUpdate(to, from, next) {
        next()
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
        // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
        console.log('beforeRouteUpdate');
    },
    beforeRouteLeave(to, from, next) {
        next()
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
        console.log('beforeRouteLeave');
    }
}

数据获取

导航完成后获取数据

当你使用这种方式时，我们会马上导航和渲染组件，然后在组件的 created 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。

<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>

当前tabbar的选中效果

<router-link> 组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

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

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

/* 当前被点击的router-link会自动添加router-link-active类名 */
.router-link-active {
    background-color: hotpink;
}