Vue-router之配置 - wpsshop博客

new Router 配置项

mode

hash / histoty

配置路由 history 模式

作为有服务端渲染的应用，不希望有 #，上述是 hash 模式，# 更多是用来做定位的，同时它不会被搜索引擎解析，导致网站 SEO 效果不好。

在 router options 中使用 mode: 'history'


export default () => {
  return new Router({
    routes,
    mode: 'history' // 默认 hash 模式
  })
}
复制代码

base

页面基础路径

设置之后，使用 vue-router api 进行跳转都会加上这个 base 路径


export default () => {
  return new Router({
    routes,
    mode: 'history', 
    base: '/base/' // 两边斜杠要加
  })
}
复制代码

linkActiveClass 和 linkExactActiveClass


// app.vue
<template>
  <div id="app">
    <router-link to="/app">app</router-link>
    <router-link to="/login">login</router-link>
    <router-view />
  </div>
</template>
复制代码

此时，控制台对应的 a标签显示


<a data-v-06ebb29e="" href="/base/app" class="router-link-exact-active router-link-active">app</a>
复制代码

对 class 进行配置


// router.js
export default () => {
  return new Router({
    routes,
    mode: 'history', 
    base: '/base/', 
    linkActiveClass: 'active-link',
    linkExactActiveClass: 'exact-active-link'
  })
}
复制代码

配置之后的 a 的 class，就是配置的值。


<a data-v-06ebb29e="" href="/base/app" class="exact-active-link active-link">app</a>
复制代码

区别

添加一个新路由 /login/exact


// client/config/routes.js
export default [
  {
    path: '/login',
    component: Login
  },
  {
    path: '/login/exact',
    component: Login
  }
]
复制代码


// client/app.vue
<template>
  <div id="app">
    <router-link to="/login">login</router-link>
    <router-link to="/login/exact">login exact</router-link>
  </div>
</template>
复制代码

当点击 login 链接时，跳转到 login 页面，此时 login 和 login exact 链接标签，login 有两个 class。


<a data-v-06ebb29e="" href="/base/login" class="exact-active-link active-link">login</a>
<a data-v-06ebb29e="" href="/base/login/exact" class="">login exact</a>
复制代码

当点击 login exact 链接时，此时 login 和 login exact 链接标签，login 有一个 class，login exact 有两个 class。


<a data-v-06ebb29e="" href="/base/login" class="active-link">login</a>
<a data-v-06ebb29e="" href="/base/login/exact" class="exact-active-link active-link">login exact</a>
复制代码

vue-router 认为只有路由真正匹配时，才会加上 exact-active-link 这个 class，如果只有一部分重合，就会加上 active-link。

scrollBehavior

页面跳转后，页面是否滚动。


// router.js
export default () => {
  return new Router({
    scrollBehavior (to, from, savedPostion) {
      if (savedPostion) {
        return savedPostion
      } else {
        return { x: 0, y: 0 }
      }
    }
  })
}
复制代码

parseQuery 和 stringifyQuery

定制 query 信息

vue 会默认处理，如果有特定需求，可以借助这两个配置项。


// router.js
export default () => {
  return new Router({
    parseQuery (query) {},
    stringifyQuery (obj) {}
  })
}
复制代码

fallback

不是所有浏览器都支持前端路由的方式，如果不支持，设置 fallback: true，vue 会自动 fallback 到 hash 模式。

路由配置

路由命名 name

name 和 path 可以没有关系，可以通过 name 来进行路由的跳转。

没使用之前


// client/config/routes.js
export default [
  {
    path: '/app',
    component: Todo
  }
]
// app.vue
<template>
  <div id="app">
    <router-link to="/app">app</router-link>
  </div>
</template>
复制代码

使用后，效果和使用路径相同。


// client/config/routes.js
export default [
  {
    path: '/app',
    component: Todo,
    name: 'app'
  }
]
// app.vue
<template>
  <div id="app">
    <router-link :to="{name: 'app'}">app</router-link>  // 注意, v-bind:to
  </div>
</template>
复制代码

路由元信息 meta

和 HTML 中 header 部分的 meta 页面原信息类似，例如 description 有助于 seo 等，一般和路由没什么关系的配置可以写在这。


// client/config/routes.js
export default [
  {
    path: '/app',
    component: Todo,
    name: 'app',
    meta: {
      title: 'this is app',
      description: 'xxx'
    }
  }
]
复制代码

子路由 children

嵌套路由


// client/config/routes.js
import Todo from '../views/todo/todo.vue'
import Login from '../views/login/login.vue'
 
export default [
  {
    path: '/app',
    component: Todo,
    },
    children: [ // 在 app 路由下，添加子路由
      {
        path: 'test',
        component: Login
      }
    ]
  }
]
 
复制代码


// client/views/todo/todo.vue
<template>
  <section class="real-app">
  <router-view />  // 子路由使用，需要再上一级路由页面加上 router-view 显示。
  </section>
</template>
复制代码

给 router-view 加 transition

给所有路由切换加个过渡效果。


// client/app.vue
<template>
  <div id="app">
    <transition name="fade"> // 使用 name
      <router-view />
    </transition>
  </div>
</template>
复制代码


/* client/assets/styles/global.styl */
.fade-enter-active, .fade-leave-acitve /* fade- */
  transition: opacity  0.3s
.fade-enter, .fade-leave-to
  opacity : 0
复制代码