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