vue-router 对构建单页面应用有着至关重要的作用。
在大致看完了 vue2.0 的官方文档后 开始了vue-router 的撸文档之旅。
并参考 https://www.jianshu.com/p/8013d8d37bd0 这篇博客 纪录下自己的学习过程。
通过注入路由器，我们可以在任何组件内通过 this.router 访问路由器，也可以通过 this.route 访问当前路由
vue-router 改变 页面路由 分两种形式
<router-link to=""></router-link>
this.$router.push('home')
组件调用 和 函数式 调用
replace 方法 用于 替换当前路由地址
go back 的参数为整数 用于 控制history记录的前进和后退
params传递的数据可用于匹配动态路由字段。
query传递数据的方式就是URL常见的查询参数。
vue-router 官方文档的demo:
动态匹配路由
<router-link to="/user/foo">/user/foo</router-link>
<router-link to="/user/bar">/user/bar</router-link>
const routes = [
{ path: '/user/:id', component: User }
]
通过 ：id 来匹配 /user/foo 路径中的 参数 可以动态匹配 多个参数
/user/:username/post/:post_id
/user/evan/post/123
route.params：{ username: 'evan', post_id: 123 } 复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化)route 对象
有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高
嵌套路由
在组件模版中 添加 <router-view></router-view>
<router-link to="/user/foo">/user/foo</router-link>
<router-link to="/user/foo/profile">/user/foo/profile</router-link>
<router-link to="/user/foo/posts">/user/foo/posts</router-link>
const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
const UserHome = { template: '<div>Home</div>' }
const UserProfile = { template: '<div>Profile</div>' }
const UserPosts = { template: '<div>Posts</div>' }
const routes = [
{ path: '/user/:id', component: User,
children: [
// 当 /user/:id 匹配成功，
// UserHome 会被渲染在 User 的 <router-view> 中
{ path: '', component: UserHome },
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
如果提供了 path，params 会被忽略
正确的写法 使用命名式的路由
有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。
const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
有时候想同时 (同级) 展示多个视图，而不是嵌套展示，命名视图
你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。
“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b
“别名”/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const Home = { template: '<div><h1>Home</h1><router-view></router-view></div>' }
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Baz = { template: '<div>baz</div>' }
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/home', component: Home,
children: [
// absolute alias
{ path: 'foo', component: Foo, alias: '/foo' },
// relative alias (alias to /home/bar-alias)
{ path: 'bar', component: Bar, alias: 'bar-alias' },
// multiple aliases
{ path: 'baz', component: Baz, alias: ['/baz', 'baz-alias'] }
]
}
]
})
new Vue({
router,
template: `
<div id="app">
<h1>Route Alias</h1>
<ul>
<li><router-link to="/foo">
/foo (renders /home/foo)
</router-link></li>
<li><router-link to="/home/bar-alias">
/home/bar-alias (renders /home/bar)
</router-link></li>
<li><router-link to="/baz">
/baz (renders /home/baz)</router-link>
</li>
<li><router-link to="/home/baz-alias">
/home/baz-alias (renders /home/baz)
</router-link></li>
</ul>
<router-view class="view"></router-view>
</div>
`
}).$mount('#app')
github 仓库地址：https://github.com/lancelot1025/learnVue/tree/router
