vue自学

路由

起步

1. 当需要把Vue Router添加进来的时候，我们需要做的就是组件映射到路由，然后告诉Vue router哪里渲染就行。
2. 路由出口 <router-view></router-view>。

动态路由匹配

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

• 一个“路径参数 ”使用冒号 :，当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。

响应路由参数的变化

1. 当使用路由参数的时候,例如从 /user/a 到 /user/b 时，原来的组件会被复用。组件的生命周期不会再被调用。
2. 对路由参数的变化做出响应时， 有以下两种方式。

• watch $route对象

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

• 导航守卫 beforeRouteUpdate

  const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
  }

捕获所有路由

• 如果想匹配 任意路径，使用通配符（*）.

• 当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数.它包含了 URL 通过通配符被匹配的部分.

  高级匹配模式

  path-to-regexp

  匹配优先级

  同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的 定义顺序：谁先定义的，谁的优先级就最高。

嵌套路由

1. 要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。

编程试导航

router.push()

在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = '123'
router.push({ name: 'user', params: { userId }})    /user/123
router.push({ path: `/user/${userId}` })            /user/123

// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

router.replace()

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

router.go()

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

命名路由

通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候

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

要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
====
router.push({ name: 'user', params: { userId: 123 }})

命名视图

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

重定向和别名

重定向

“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' },

    //也可以是命名路由
    { path: '/a', redirect: { name: 'foo' }}

    //也可以是一个方法
     { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

别名

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。

布尔模式

{ path: '/user/:id', component: User, props: true },

对象模式

如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。

{ path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } } 

函数模式

你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。

 { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }

URL /search?q=vue 会将 {query: 'vue'} 作为属性传递给 SearchUser 组件。