Vue-Router基础

单页面应用(SPA)的核心思想之一，就是更新视图而不重新请求页面，简单来说，它在加载页面时，不会加载整个页面，只会更新某个指定的容器中的内容。对于大多数单页面应用，都推荐使用官方支持的vue-router。

在实现单页面前端路由时，提供了两种方式，分别是hash模式和history模式，根据mode参数来决定采用哪一种方式。

const router = new VueRouter({
  routes,
  mode: "history" // 或者 "hash"
})

二、hash模式

http://example.com/#/home

三、history模式

http://example.com/home

Vue-Router最基础的使用步骤

路由就是大家都理解的页面跳转， 一般我们前端最基础的配置都会在app.vue上

<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>

定义 (路由) 组件

通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器

一般常用的 嵌套 (路由) 组件

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      name:'home',
      component: Home,
      children: [
        {
          // 当 /home/about 匹配成功，
          // About 会被渲染在 Home 的 <router-view> 中
          path: 'about',
          name:'about',
          component: About
        },
        {
          // 当 /home/user/:id 匹配成功 
          // User 会被渲染在 Home 的 <router-view> 中
          path: 'user/:id',
          name:'user'
          component: User
        }
      ]
    }
  ]
})

动态路由

当 /home/user/:id ，像 /home/user/80 和 /home/user/8080 都将映射到相同的路由。 “路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，

编程式的导航

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

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

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

// 字符串 path
this.$router.push('home/user')

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

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

// 带查询参数，变成 /home/user?userId=123
this.$router.push({ path: '/home/user', query: { userId: 'userId' }})

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = '123'
this.$router.push({ name: 'user', params: { userId }}) // -> /home/user/123
this.$router.push({ path: `/home/user/${userId}` }) // -> /home/user/123
// 这里的 params 不生效
this.$router.push({ path: '/home/user', params: { userId }}) // -> /user

路由对象属性

• $route.query （使用最多）

  • 类型: Object

    一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /home/user?userId=1，则有 $route.query.userId == 1，如果没有查询参数，则是个空对象。

• $route.params

  • 类型: Object

    一个 key/value 对象，包含了动态片段和全匹配片段，例如，对于路径/home/user/8080 则有$route.params.id == '8080'，如果没有路由参数，就是一个空对象。

• $route.path

  • 类型: string

    字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。

• $route.hash

  • 类型: string

    当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。

• $route.fullPath

  • 类型: string

    完成解析后的 URL，包含查询参数和 hash 的完整路径。

  当 URL 为 /home/user，$route.matched 将会是一个包含从上到下的所有对象。

• $route.name

  当前路由的名称。

• $route.redirectedFrom

  如果存在重定向，即为重定向来源的路由的名字。 主要是嵌套路由的根路由。

  Router 实例方法

router.beforeEach

router.beforeResolve

router.afterEach

router.beforeEach((to, from, next) => {
  /* 必须调用 `next` */
})

router.beforeResolve((to, from, next) => {
  /* 必须调用 `next` */
})

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

router.push