vue-router 的学习

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

vue-router 的学习