Vue路由

路由懒加载

实际项目中使用

const router = new Router({
  routes: [
    {
      path: '/',  //主页
      component: () => import('@/pages/Index/template.vue')
    },
    {
      path:'/login',  //登录页面
      component: () => import('@/pages/Login/template.vue')
    },
    {
      path:'/create',  //创建博客页面
      component: () => import('@/pages/Create/template.vue'),
      meta:{requireAuth: true}
    },
    {
      path:'/detail/:blogId',  //博客详情页面
      component: () => import('@/pages/Detail/template.vue')
    },
    {
      path:'/edit/:blogId',  //编辑，修改博客页面
      component: () => import('@/pages/Edit/template.vue'),
      meta:{requireAuth: true}
    },
    {
      path:'/my',  //我的页面
      component: () => import('@/pages/My/template.vue'),
      meta:{requireAuth: true}
    },
    {
      path:'/register',  //注册页面
      component: () => import('@/pages/Register/template.vue')
    },
    {
      path:'/user/:userId',  //用户他人页面
      component: () => import('@/pages/User/template.vue')
    }
  ]
})

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。
首先，可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)：

const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

第二，在 Webpack 2 中，我们可以使用动态 import语法来定义代码分块点 (split point)：

import('./Foo.vue') // 返回 Promise

结合这两者，这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。

const Foo = () => import('./Foo.vue')

在路由中使用：

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

路由对象

一个路由对象 (route object) 表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录 (route records)。
路由对象是不可变 (immutable) 的，每次成功的导航后都会产生一个新的对象。

• 在组件内，即 this.$route
• 导航守卫的参数：

router.beforeEach((to, from, next) => {
  // `to` 和 `from` 都是路由对象
})

路由对象属性

• $route.path
• $route.params
• $route.query
• $route.hash
• $route.fullPath
  完成解析后的 URL，包含查询参数和 hash 的完整路径。
• $route.matched
  一个数组，包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。

路由注入

通过在 Vue 根实例的 router 配置传入 router 实例，下面这些属性成员会被注入到每个子组件。

• this.$router
  router实例
• this.$route
  当前激活的路由信息对象。这个属性是只读的，里面的属性是 immutable (不可变) 的，不过你可以 watch (监测变化) 它。

动态路由

例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

const User = {
  template: '
User
'
}

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

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

路由守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。

全局前置守卫

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})