Vue-router之配置

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

复制代码

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

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

对 class 进行配置

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

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

app
复制代码

区别

添加一个新路由 /login/exact

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

// client/app.vue