vue学习之vue-router使用整理笔记

作者: 阿go | 来源:发表于2017-11-29 23:44 被阅读0次

用Vue.js + vue-router创建单页应用，是非常简单的，基本是这样的：

组件 → 路由 → 渲染地方

路由的使用

<!-- HTML -->
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！

路由动态匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个User组件，对于所有ID各不相同的用户，都要使用这个组件来渲染。那么，我们可以在vue-router的路由路径中使用动态路径参数来达到这个效果。

const User = {
  template: '<div>User</div>'
}
const router = new VueRouter({
    routes: [
        {path: '/user/:id', component: User}
    ]
})

路径参数用：表示。

一个路由中可以设置多段路径参数，对应的值都会设置到route.params。除了route.params外，route对象还提供了其它有用的信息，例如route.query，route.hash等。当使用路由参数时，组件实例会被复用，这就意味着组件的生命周期钩子不会再被调用。如果想对路由参数的变化作出响应，可以简单地watch route对象。

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

或者使用 2.2 中引入的 beforeRouteUpdate 守卫：

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // don't forget to call next()
  }
}

路由嵌套

组件模板中有可能有自己的出口，要在嵌套的出口中渲染组件，需要在VueRouter的参数中使用children配置：

const router = new VueRouter({
    router: [
        {path: '/user/:id', component: User,
            children: [
                {
                    path: 'profile',
                    component: UserProfile
                },
                {
                    path: 'posts',
                    component: UserPosts
                }
            ]
        }
    ]
})

要注意，以/开头的嵌套路径会被当作根路径。这让你充分的使用嵌套组件而无须设置嵌套的路径。

编程式导航

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

router.push() 这种方法会向history栈中添加记录
router.replace() 不会在history中添加记录，而是替换当前路径
router.go(n) 参数是一个整数，意思是在history记录中向前或者后退多少步，类似window.history.go(n)

使用方式

// 注意： 所有push中所使用的路径，都需要在router中配置过了，参会生效，而且push和replace都第二和第三个参数，分别为成功回调函数和失败回调函数
// 注意：当以path方式添加路径时，如router.push({ path: '/user', params: { userId: 123 })，此时的params会被忽略掉，获取不到
// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称（名称需要有唯一性，否则根据优先级，写在前面的有效，后面的无效）。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

重定向

下面例子是从 /a 重定向到 /b：
感觉一般会用在默认路径比较多

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

别名

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

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

当你使用 history 模式时，URL 就像正常的 url，例如

http://yoursite.com/user/id

，也好看！

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问

http://oursite.com/user/id

就会返回 404，这就不好看了。

那么为什么mode改为history就不能刷新，否则出错？？？

1、前端 /a -> /b 浏览器的地址栏变了，location.search变了，这个时候，点击刷新的时候，请求直接到server上，如果server不做配置，那么很可能直接返回404，解决方案就是在server上做一个路由配置，每次都到入口，入口的前端路由在跳转到/b上
2、前端 #!/a -> #!/b 浏览器的地址栏不变，变得是location.hash, 这个时候点击刷新的时候，请求直接还是到入口，入口根据hash直接跳回就行了，不需要做server端配置

导航钩子

正如其名，vue-router提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的，单个路由独享的，或者组件级的。

全局钩子

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

router.beforeEach((to, from, next) => {
  // ...
})
每个钩子方法接收三个参数：

    to: Route: 即将要进入的目标 路由对象

    from: Route: 当前导航正要离开的路由

    next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

        next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。

        next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。

        next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

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

某个路由独享的钩子

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内的钩子

const Foo = {
template: ...,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 this
// 因为当钩子执行前，组件实例还没被创建
//可以使用next（vm => {vm.dataName //处理程序}）方式使用
//此时的vm相当于this，可以理解为在next（）中把vm当this用，其他都一样
//其实可以发现此时的next中的vm也是在组件的created钩子之后才有的
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，而且该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 this
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 this
}
}

路由导航的执行顺序

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

过渡效果

<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果，<transition> 的所有功能 在这里同样适用。
<transition>
  <router-view></router-view>
</transition>

滚动行为

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

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

API

< router-link>

组件支持用户在具有路由功能的应用中（点击）导航。通过to属性指定目标地址，默认渲染成带有正确连接的标签，可以通过配置tag属性生成别的标签，另外，当目标路由成功激活时，链接元素自动设置一个表示激活的CSS类名。

但是比起写死的标签要好些，理由如下：

1.无论是在HTML5history模式还是hash模式，它的表现行为一致，所以当需要切换路由模式，或者在IE9降级使用hash模式，无须作任何变动。

2.在HTML5history模式下，router-link会拦截点击事件，让浏览器不再重新加载页面。

3.当你在HTML5history模式下使用base选项后，所有的to属性都不需要写（基路径）了。

to

<!-- 几种使用方式 -->

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

replace

<router-link :to="{ path: '/abc'}" replace></router-link>

tag

默认为a标签，有时候想要渲染成某种标签，我们是用tag prop类指定何种标签，同样它还是会监听点击，触发导航。

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

active-class

默认值是router-link-active，设置链接激活时使用的CSS类名。默认值可以通过路由的构造选项linkActiveClass来全局配置。(整个链路都会有linkActiveClass这个类名)

exact

默认值是false，是否扩展到全局。当设置为true时，激活的路由会有router-link-exact-active的类

<router-view>

是一个functional组件，渲染路径匹配到的视图组件。渲染的组件还可以内嵌自己的，根据嵌套路径，渲染嵌套组件。

name

默认值是default，如果设置了名称，则会渲染对应的路由配置中components下的响应组件。(即多视图中)

路由信息对象

一个 route object（路由信息对象）表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route records（路由记录）。

属性

$route.path
字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"
$route.params
一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
$route.query
一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。
$route.hash
当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。
route.fullPath
完成解析后的 URL，包含查询参数和 hash 的完整路径
$route.matched
一个数组，包含当前路由的所有嵌套路径片段的路由记录。路由记录就是 routes 配置数组中的对象副本（还有在 children 数组）。

Router实例

包含有各种方法和钩子的实例