vue的路由

Vue-router是Vue.js官方的路由插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。
1.首先引入vue.js和vue-router.js
2. 创建Router

var router = new VueRouter()

3.映射路由

router.map({
    
    
    '/home': {
    
     component: Home },
    '/about': {
    
     component: About }
})

4.使用v-link指令

<div class="list-group">
    <a class="list-group-item" v-link="{ path: '/home'}">Home</a>
    <a class="list-group-item" v-link="{ path: '/about'}">About</a>
</div>

5.使用标签

<router-view></router-view>

在页面上使用标签，它用于渲染匹配的组件。
6.启动路由

var App = Vue.extend({
    
    })
router.start(App, '#app')

router.redirect，
应用在首次运行时右侧是一片空白，应用通常都会有一个首页，例如：Home页。
使用router.redirect方法将根路径重定向到/home路径：

router.redirect({
    
    
    '/': '/home'
})

在这里插入图片描述

路由守卫的几种方式-M

路由守卫有三种:
1:全局守卫: beforeEach、afterEach、beforeResolve
2:独享守卫 (单个路由里面的钩子): beforeEnter、 beforeLeave
3: 组件内守卫: beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave
路由守卫：就是在路由跳转的过程中触发的钩子函数，可以在每一个钩子函数里面进行相应的操作，例如说，路由拦载，在访问页面的时候需要登录验证，如果登录过了，直接显示，没有登录显示在登录页面，还可以终止路由跳转。
每个守卫方法接收三个参数:
to: Route: 即将要进入的目标路由对象(to是一个对象，是将要进入的路由对象，可以用to.path调用路由对象中的属性)
from: Route: 当前导航正要离开的路由
next: Function: 这是一个必须需要调用的方法，执行效果依赖 next 方法的调用参数
在这里插入图片描述

路由的懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
我们可以使用动态 import (opens new window)语法来定义代码分块点 (split point)

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

定义一个能够被 Webpack 自动代码分割的异步组件：

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

把组件按组分块：
想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用命名 chunk (opens new window)，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

路由守卫的几种方式-M

vue的路由

路由守卫的几种方式-M

路由的懒加载

猜你喜欢