vue-router总结

1、通过 :to 传参

//需要传的参数在params中
<router-link :to="{name:'A',params:{usename:'李四',age:'24'}}">A</router-link>

//接收参数
{{$route.params.usename}}  //李四

{{$route.params.age}}  // 24

2、通过URL传参

router/index.js

{
// 格式：/路径/:id
// (\\w+)：匹配正则
  path: '/Hi/:id(\\w+)/:name', 
  name: 'Hi',
  component:Hi //组件
},

App.vue

// 把12345和王五传过去
<router-link to="/Hi/12345/王五">Hi</router-link>

Hi.vue

//接收
 <p>{{$route.params.id}}</p>
 <p>{{$route.params.name}}</p>

效果

重定向 redirect

当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b

//index.js
  {
    path: '/goHome', //路径
    name: 'goHome',
    redirect:'/' //  重定向回到的路径 
  },

//APP.vue
 <router-link to="/goHome">回到首页</router-link>

重定向并返回参数

//index.js
{
  path: '/goHi/:content1/:content2', //路径
  name: 'goHi',
  redirect: '/Hi/:content1/:content2' //重定向传参
},

//App.vue
 <router-link to="/goHi/456/重定向返回的参数">goHi</router-link>

//Hi.vue
<p>{{$route.params.content1}}</p>
<p>{{$route.params.content2}}</p>

重定向并传参

别名 alias

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

//index.js

{
  path: '/Alias1', 
  name: 'Alias1',
  component:Alias1,
  alias: '/Alias2'  // 关键 
},

//App.vue

<router-link to="/Alias1">Alias1</router-link>
<router-link to="/Alias2">Alias2</router-link>

//Alias1.vue

<template>
  <div>
    <hr>
        <h1> 这里是【别名】alias1</h1>
  </div>
</template>

别名效果

• 注：重定向跟别名的效果一样。区别就是别名的路径URL发生了变化，重定向不会。

路由过渡动画

1、 组件过渡过程中，会有四个CSS类名进行切换，这四个类名与上面transition的name属性有关，比如name="bbb"，会有如下四个CSS类名：

• bbb-enter：进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；

• bbb-enter-active：进入过渡的结束状态，元素被插入时就生效，在过渡过程完成之后移除；

• bbb-leave：离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；

• bbb-leave-active：离开过渡的结束状态，元素被删除时生效，离开过渡完成之后被删除；

2、过渡模式mode

• in-out：新元素先进行过渡，完成之后当前元素过渡离开。

• out-in：当前元素先进行过渡，完成之后新元素过渡进入。

//APP.vue
<transition name="bbb" mode="out-in"> 
  <router-view/>
</transition>

// css

<style>
  .bbb-enter {
    opacity: 0;
  }
  .bbb-enter-active {
    transition: opacity 0.5s;
  }
  .bbb-leave {
    opacity: 1;
  }
  .bbb-leave-active {
    opacity: 0;
    transition: opacity 0.5s;
  }
</style>

更多请看vue文档

路由过渡动画

mode

可选值：

• hash：使用URL hash值来做路由。（默认）
• history： 依赖 HTML5 History API 和服务器配置
• abstract：支持所有 JavaScript 运行环境，如 Node.js 服务器端。

注意：并非transition中的mode

//index.js

Vue.use(Router)
export default new Router({

  mode: 'history',

  routes: [...]
})

hash和history最根本的区别是：是否有 #

history hash

404页面

当用户输入URL错误时，我们希望有个404页面跳出来让用户知道自己输入错误了。

//index.js

//引入404页面
import Error from '@/components/Error'

// 404页面路由配置   
{
  path: '*',  // 重点
  name:'Error',
  component: Error,
}

//Error.vue
<template>
  <div>
    <hr>
    <h1> 404 </h1>
    <h2>老铁页面不存在</h2>
  </div>
</template>

404页面

路由中的钩子函数

• beforeEnter：全局前置守卫
• afterEach：全局后置钩子
• beforeRouteEnter 进入路由之前
• beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用
• beforeRouteLeave 离开路由之前

---

1、beforeEnter：全局前置守卫

{
  path: '/Hi/:id(\\w+)/:name', //路径
  name: 'Hi',
  component: Hi, //组件
  beforeEnter: (to, from, next) => {
    console.log(to)
    console.log(from)
    // true：跳转   false：不跳转  {path:'/'}： 跳转到根目录
    next({path:'/'}) 
  }
},

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

from：当前导航正要离开的路由
next() ：进行管道中的下一个钩子。
next(false) ：停止跳转。
next(true)： 正常跳转
next({path:'/'}) ：跳转到某个地址。如：首页

参考