vuecli用到的一些router（路由）技巧

vuecli之router（路由）

路由重定向

• 使用 redirect

• 比如说我们打开首页默认会跳转登录页面和直接在根路由下加上登录的路径效果是一样的，下图用/home作为示范：router.js:

  

去掉路由上的#号

• router.js使用------mode: 'history',

选中路由的激活状态

假设app.vue的路由是这样的：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/home" exact>Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/test">test</router-link> |
      <router-link to="/animate">animate</router-link>
    </div>
      <router-view/>
  </div>
</template>

则指定样式：

.router-link-active {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 25px;
  font-style: italic
  }

则达成效果如图：当我们点击animate这个路由时的效果

修正默认页路由一直在的激活状态

这种情况用exact修正

切换路由的过渡动画

为<router-view/>外边嵌套好过渡标签就能完成页面切换时的动画效果

template:
<transition name="fade" mode="out-in">
      <router-view/>
    </transition>
css:
.fade-enter-active, .fade-leave-active {
  transition: opacity .1s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}

使用路由传递参数

• query:

// 传入
<router-link to="/test?id=10&name=eva">test</router-link>
// 获取
template：
console.log($route.query.id) // 10
console.log($route.query.name)// eva

• params

router.js:
// 定义参数
export default new Router({
  mode: 'history',
  routes: [
  {
      path: '/test/:id/:name',
      name: 'test',
      component: test
    },
      ....
// 传入
<router-link to="/test/10/eva">test</router-link>
// 获取
template：
console.log($route.params.id) // 10
console.log($route.params.name)// eva  

多用params