Vue-router

一。vue-route 简介：

1. 通过进行组件渲染。通过 进行跳转（组件局部刷新）。
2. api 导航：通过router实例，router.push() / router.replace / router.go() / router.
3. 获取路由参数：t通过 route 属性进行获取 (this.$route.query / this.$route.params )。

二。动态路由说明：同一组件需要使用不同路由进行渲染时，则需要使用动态路由（动态路由通过冒号 : 进行操作的）。

例如：/user/:id. 这样后面的id就是不同的值。

如果需要监听路由参数变化则可以通过watch 里面监听 $route 属性。还可以通过 beforeRouteUpdate 组件导航钩子进行。

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

三。new VueRouter({})。

const router = new VueRouter({
  routes: [
    { path: '/user/:id', // 导航地址，这就是一个动态路由。
      component: User,  // 这个代码组件
      meta: { name: 'a'}, // 路由云信息。
      name: 'user',  // 路由的名称。
      redirect: '/a', // 路由重定向。
      alias: '路由别名', // 路由别名。
      children: [ // 这个代表子组件，也就是嵌套路由
        {
          path: 'profile',
          component: UserProfile
        },
        {
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

四。路由传参。

1. 通过动态路由进行传参。
2. 通过props 进行。prop 为 true / 为 对象 / 为函数 ，则可将动态路由的参数设置为组件属性。
3. 通过this.$router.push (函数式导航传参)。

   // 字符串
   router.push('home')
   
   // 对象
   router.push({ path: 'home' })
   
   // 命名的路由
   router.push({ name: 'user', params: { userId: '123' }})
   
   router.push({ path: `/user/${userId}` }) // -> /user/123
   
   // 带查询参数，变成 /register?plan=private
   router.push({ path: 'register', query: { plan: 'private' }})

   五

五。mode模式：hash 模式、history 模式（需要后端配合）、abstract。

配置路由模式:

• hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。

• history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。

• abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

六。scrollBehavior 主要用过导航后默认滚动。

七。路由懒加载。() => import('')