路由懒加载
实际项目中使用
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: '<div>User</div>'
}
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) => {
// ...
})
