vue Router

时间：2019-05-21 11:26:01 阅读：110 评论：0 收藏：0 [点我收藏+]

vue——Router简介

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。
传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换

基础

1.动态路由匹配

定义路由

export default new Router({
  routes: [
    {
      path: '/BookDetails/:book_id',
      name: 'BookDetails',
      component: BookDetails
    },
    {
      path: '/BookDetails/user/:username/book/:book_id',
      name: 'BookDetailsTwo',
      component: BookDetailsTwo
    },
  ]
})

页面

<template>
  <div class="book">
    <router-link :to="{ name:'BookDetails',params: { book_id: 1}}">跳转书籍详情\^o^/</router-link><br/><br/><br/>
    <router-link :to="{ name:'BookDetailsTwo',params: { book_id: 1,username: '小嘟嘟'}}">跳转高级书籍详情┗|｀O′|┛</router-link>
  </div>
</template>

桥豆麻袋(～￣▽￣)～，对<router-link>感兴趣的可以去看官网 ,或者小姐姐(●‘?‘●) 的博客，然后go on

点击跳转后的路由

http://localhost:8080/#/BookDetails/1
http://localhost:8080/#/BookDetailsTwo/user/小嘟嘟/book/1

跳转的页面接收路由参数（以第二个跳转为例）

<template>
  <div>
    <div>人员姓名：{{$route.params.username }}</div>
    <div>书籍Id：{{$route.params.book_id }}</div>
  </div>
</template>

技术分享图片

1-1响应路由参数的变化

提醒一下，当使用路由参数时，例如从 /BookDetails/1 导航到 /BookDetails/2，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

BookDetails组件

<template>
  <div class="book-details">
    <div>书籍详情 Id：{{ $route.params.book_id }}</div><br/><br/>
    <router-link :to="{ name:'BookDetails',params: { book_id: 2}}">自己跳自己o(*￣▽￣*)ブ</router-link>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  created(){
    console.log('进入图书详情~~~')
  }
}
</script>

当从父页面跳转过来时会执行生命周期，当点击组件里‘自己跳自己’时，并不会触发生命周期

当然有解决方法，还是两种(●ˇ?ˇ●)

方法一（使用watch (监测变化) $route 对象）

BookDetails组件

<template>
  <div class="book-details">
    <div>书籍详情 Id：{{ $route.params.book_id }}</div><br/><br/>
    <router-link :to="{ name:'BookDetails',params: { book_id: 2}}">自己跳自己o(*￣▽￣*)ブ</router-link>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  created(){
    console.log('进入图书详情~~~')
  },
  watch:{
    '$route'(to, from) {
      console.log(to ,from, '路由监听')
    }
  }
}
</script>

技术分享图片

方法二（使用beforeRouteUpdate 导航守卫）

BookDetails组件

<template>
  <div class="book-details">
    <div>书籍详情 Id：{{ $route.params.book_id }}</div><br/><br/>
    <router-link :to="{ name:'BookDetails',params: { book_id: 2}}">自己跳自己o(*￣▽￣*)ブ</router-link>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  created(){
    console.log('进入图书详情~~~')
  },
  beforeRouteUpdate(to, from, next){
    console.log(to, from, next,'导航守卫')
  },
  watch:{
    '$route'(to, from) {
      console.log(to ,from, '路由监听')
    }
  }
}
</script>

注意！！！使用beforeRouteUpdate后watch不会生效

技术分享图片

1-2捕获所有路由或 404 Not found 路由

在上面定义好的路由最后面添加新的路由

{
  path: '/Fruits*',
  name: 'FruitsBanana',
  component: FruitsBanana
},
{
  path: '*',
  name: 'NotFound',
  component: NotFound
}

当使用通配符路由时，请确保路由的顺序是正确的，也就是说含有通配符的路由应该放在最后。路由 { path: ‘*‘ } 通常用于客户端 404 错误

当我们输入路由

http://localhost:8080/#/FruitsApple

会匹配到‘/Fruits*’，所以会跳转到FruitsBanana组件

再次输入路由

http://localhost:8080/#/IAmVeryHappy

这时候就会匹配到 ‘*’，自然就进入到了写好的404页面(～￣▽￣)～

1-3高级匹配模式

vue-router 使用 path-to-regexp 作为路径匹配引擎，所以支持很多高级的匹配模式，例如：可选的动态路径参数、匹配零个或多个、一个或多个，甚至是自定义正则匹配。

举个栗子(～￣▽￣)～

// 第一种（通过？的使用可以将参数变为可选项）
{
  path: '/PathToRegexp/:id?',
  name: 'PathToRegexp',
  component: PathToRegexp
}


//第二种（使用正则，只匹配id是数字）
{
  path: '/PathToRegexp/:id(\\d+)',
  name: 'PathToRegexp',
  component: PathToRegexp
}

1-4匹配优先级

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

定义路由

{
  path: '/Fruits*',
  name: 'FruitsBanana',
  component: FruitsBanana
},
{
  path: '/Fruits*',
  name: 'FruitsPear',
  component: FruitsPear
}

如上面所示，谁先定义的，谁的优先级就最高，只要匹配成功，就会进入到FruitsBanana组件

2.嵌套路由

Vue会自带一个是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套

呐，现在来改变一下路由

{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits,
  children: [
    {
      path: 'Apple',
      name: 'Apple',
      component: Apple
    },
    {
      path: 'Grape',
      name: 'Grape',
      component: Grape
    },
  ]
}

组件

<template>
  <div>
    我是水果页面<br/><br/><br/>
    <router-link :to="{ name:'Apple'}">苹果??</router-link><br/><br/><br/>
    <router-link :to="{ name:'Grape'}">葡萄??</router-link><br/><br/><br/>
    <router-view></router-view>
  </div>
</template>

当我们访问

http://localhost:8080/#/Fruits/Apple
http://localhost:8080/#/Fruits/Grape

就会更改组件里面<router-view></router-view>的容

but当我们访问

http://localhost:8080/#/Fruits

的时候<router-view></router-view>是没用内容的(T_T)

解决方法

{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits,
  children: [
    {
      path:'',
      component: Strawberry
    },
    {
      path: 'Apple',
      name: 'Apple',
      component: Apple
    },
    {
      path: 'Grape',
      name: 'Grape',
      component: Grape
    },
  ]
}

没错加一个空的path，这时候访问

http://localhost:8080/#/Fruits

<router-view></router-view>就会显示Strawberry组件的内容(●ˇ?ˇ●)

3.编程式的导航

除了使用<router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

`router.push(location, onComplete?, onAbort?)`

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

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

当你点击时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

声明式	编程式
`<router-link :to="...">`	`router.push(...)`

// 字符串
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-link 组件的 to 属性。

`router.replace(location, onComplete?, onAbort?)`

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

声明式	编程式
`<router-link :to="..." replace>`	`router.replace(...)`

`router.go(n)`

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

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

4.命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

路由

{
  path: '/user/:userId',
  name: 'user',
  component: User
}

用法

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

5.命名视图

首先来定义页面

<template>
  <div id="app">
    <router-view/>
    <router-view name="fruits"/>
    <router-view name="animal"/>
  </div>
</template>

路由

{
  path: '/',
  components: {
    default: Food, // 默认视图
    fruits:Pineapple,
    animal:Cat
  }
}

当我们访问路由

http://localhost:8081/#/

的时候，会渲染视图对应的组件

嵌套命名视图

定义Food组件

<template>
  我是Food
  <router-view/>
  <router-view name="animal"/>
</template>

定义路由

{
  path: '/',
  component: Food,
  children: [
    {
      path: 'Milk',
      component: Milk
    },
    {
      path: 'Cat',
      components: {
        default: Fish,
        animal: Cat
      }
    }
  ]
}

访问路由

http://localhost:8081/#/Milk
// 渲染对应的 Milk 组件

http://localhost:8081/#/Cat
// 渲染对应的 Fish、Cat 组件

有时候我们项目会有一个始终存在的导航栏，但是呢，登录页又不需要，这时候就可以使用命名视图

6.重定向和别名

重定向（redirect）

路由

{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits,
  redirect: '/Fruits/Apple'
  children: [
    {
      path: 'Apple',
      name: 'Apple',
      component: Apple
    },
    {
      path: 'Grape',
      name: 'Grape',
      component: Grape
    },
  ]
}

当我们访问

http://localhost:8080/#/Fruits

的时候，对自动跳转到

http://localhost:8080/#/Fruits/Apple

注意！！！

上面有写到

{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits,
  children: [
    {
      path:'',
      component: Strawberry
    },
    {
      path: 'Apple',
      name: 'Apple',
      component: Apple
    },
    {
      path: 'Grape',
      name: 'Grape',
      component: Grape
    }
  ]
},

其中

{
  path:'',
  component: Strawberry
}
// 不会改变路由，只是会把<router-view/>默认显示到Strawberry组件

redirect: '/Fruits/Apple'
// 会改变路由到Apple

是不一样的

重定向的目标也可以是一个命名的路由

{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits,
  redirect: {name: 'Apple'},
  children: [
    {
      path: 'Apple',
      name: 'Apple',
      component: Apple
    },
    {
      path: 'Grape',
      name: 'Grape',
      component: Grape
    },
  ]
}

当我们访问

http://localhost:8080/#/Fruits

的时候，对自动跳转到

http://localhost:8080/#/Fruits/Apple

甚至是一个方法，动态返回重定向目标

{ 
  path: '/Fruits', 
  redirect: to => {
  // 方法接收 目标路由 作为参数
  // return 重定向的 字符串路径/路径对象
  }
}

这个就不细讲了，感兴趣的可以看这里呦

别名（alias）

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

{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits,
  alias: '/b'
}

当访问

http://localhost:8080/#/b

实际上是访问的

http://localhost:8080/#/Fruits

但地址是不会变成/Fruits

当然它也有高级的玩法，感兴趣的可以看这里呦

7.路由组件传参

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

使用 props 将组件和路由解耦

路由

{
  path: '/BookDetails/:book_id',
  name: 'BookDetails',
  component: BookDetails,
  props: true
}

BookDetails组件

<template>
  <div class="book-details">
    {{book_id}}
  </div>
</template>

<script>
export default {
  props: ['book_id'],
  data () {
    return {
    }
  }
}
</script>

布尔模式

在路由配置中设置 props: true 时默认将 $route.params 数据传给组件，组件需要通过自身的 props 属性取出 params 中的属性

对象模式

如果 props 是一个对象，其下所有属性均会被传入组件。需要注意的是当 props 必须是是静态的

路由

{
  path: '/BookDetails/:book_id',
  name: 'BookDetails',
  component: BookDetails,
  props: {
    name: 'lucky',
    id: 7
  }
}

BookDetails组件

<template>
  <div class="book-details">
    {{name + id}}
  </div>
</template>

<script>
export default {
  props: ['name', 'id'],
  data () {
    return {
    }
  }
}
</script>

函数模式

路由

{
  path: '/BookDetails',
  name: 'BookDetails',
  component: BookDetails,
  props: {(route) => ({ book_id: route.query.book_id })}
}

父组件

<template>
  <div class="book">
    <button @click="goRouter">函数模式</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods:{
    goRouter(){
      this.$router.push({path: 'BookDetails', query: {book_id: 999}})
    },
  }
}
</script>

没错它也有高级的玩法，感兴趣的可以看这里呦

8.HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

路由

export default new Router({
  mode: 'history',
  routes: [...]
})

来看一下用之前和用之后的地址(～￣▽￣)～

// hash
http://localhost:8080/#/
http://localhost:8080/#/BookDetails/1

// history
http://localhost:8080/
http://localhost:8080/BookDetails/1

emmmmmmmmm 好看了。。。 (?????)

but

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/BookDetails/id 就会返回 404，这就不好看了

啊哈，后台怎么配置呢？自己去看吧，我不知道(～￣▽￣)～

进阶

1.导航守卫

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫

全局前置守卫

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

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

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中

每个守卫方法接收三个参数：

to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
- next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)
- next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
- next(‘/‘) 或者 next({ path: ‘/‘ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: ‘home‘ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
- next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法，否则钩子就不会被 resolved

举个例子

router.beforeEach((to, from, next) => {
  if(to.name === 'One'){
    next('Two')
  }
  next()
})

当我们访问

http://localhost:8080/#/One

时，就会跳到

http://localhost:8080/#/Two

全局解析守卫

在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

router.beforeEach((to, from, next) => {
  if(to.name === 'One'){
    next('Two')
  }
  next()
})

router.beforeResolve((to, from, next) => {
  if(to.name === 'Two'){
    next('Three')
  }
  next()
})

当我们访问

http://localhost:8080/#/One

时，就会跳到

http://localhost:8080/#/Two

然后再跳到

http://localhost:8080/#/Three

全局后置钩子

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身

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

路由独享的守卫

路由

{
  path: '/One',
  name: 'One',
  component: One,
  beforeEnter: (to, from, next) => {
    if(to.name === 'One'){
      next('Two')
    }
    next()
  }
}

当我们访问

http://localhost:8080/#/One

时，就会跳到

http://localhost:8080/#/Two

组件内的守卫

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

beforeRouteEnter (to, from, next) {
  // 在渲染该组件的对应路由被 confirm 前调用
  // 不！能！获取组件实例 `this`
  // 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
  // 在当前路由改变，但是该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`
}

beforeRouteEnter 守卫不能访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

不过，你可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了

beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.name = to.params.name
  next()
}

beforeRouteLeave

beforeRouteLeave (to, from , next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消

完整的导航解析流程！！！

导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

2.路由元信息

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

我们称 routes 配置中的每个路由对象为一个路由记录。路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录

一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。因此，我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

在举个栗子

router.beforeEach((to, from, next) => {
  //判断路由记录是否需要验证登录
  if (to.matched.some(record => record.meta.requiresAuth)) {
    //  自己定义的判断登录的方法
    let isLogin = getLoginStatus()
    if (!isLogin()) {
      next({
        // 跳转到登录页
        path: '/login',
        // 登录页需要知道从哪跳过来的，方便登录成功后回到原页面
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})

注意！！！

next一定要执行不然钩子函数不会resolved。

3.滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

注意: 这个功能只在支持 history.pushState 的浏览器中可用。

当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    if(to.name === 'BookDetails'){
      return { x: 0, y: 0 }
    }
  }
})

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的前进/后退按钮触发) 时才可用

当我们访问BookDetails路由的时候，就会回到顶部

当然还有好多，就不一一介绍了，可以看这里

4.路由懒加载

懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

按需加载

{
  path: '/Fruits',
  name: 'Fruits',
  component: require('@/components/Fruits')  // 非按需加载
}

{
  path: '/Fruits',
  name: 'Fruits',
  component: require(['@/components/Fruits'], resolve)  // 按需加载
}

按需加载会在页面第一次请求的时候，把相关路由组件块的js添加上；非按需加载则会把所有的路由组件块的js包打在一起

import()

推荐使用这种方式(需要webpack > 2.4)
webpack官方文档：webpack中使用import() vue官方文档：路由懒加载使用import()

const Fruits = () => import('@/components/Fruits')
{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits
}

或者

{
  path: '/Fruits',
  name: 'Fruits',
  component: () => import('@/components/Fruits')
}

把组件按组分块

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)

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

Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中

Vue Router

Vue Router Api

vue Router

原文：https://www.cnblogs.com/loveyt/p/10898625.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

vue Router

vue——Router简介

基础

1.动态路由匹配

1-1响应路由参数的变化

当然有解决方法，还是两种(●ˇ?ˇ●)

方法一（使用watch (监测变化) $route 对象）

方法二（使用beforeRouteUpdate 导航守卫）

1-2捕获所有路由或 404 Not found 路由

1-3高级匹配模式

更多高级匹配

1-4匹配优先级

2.嵌套路由

3.编程式的导航

router.push(location, onComplete?, onAbort?)

router.replace(location, onComplete?, onAbort?)

router.go(n)

4.命名路由

5.命名视图

嵌套命名视图

6.重定向和别名

重定向（redirect）

注意！！！

别名（alias）

7.路由组件传参

布尔模式

对象模式

函数模式

8.HTML5 History 模式

but

进阶

1.导航守卫

全局前置守卫

确保要调用 next 方法，否则钩子就不会被 resolved

全局解析守卫

全局后置钩子

路由独享的守卫

组件内的守卫

beforeRouteLeave

完整的导航解析流程！！！

2.路由元信息

注意！！！

3.滚动行为

4.路由懒加载

按需加载

import()

把组件按组分块

`router.push(location, onComplete?, onAbort?)`

`router.replace(location, onComplete?, onAbort?)`

`router.go(n)`