vue router详解

一、安装和使用路由

1、安装vue -router

cnpm install vue-router --save

2、在模块化工程中使用，通过Vue.use()来安装路由功能
(1)导入路由对象，调用> Vue.use(VueRouter)
(2)创建路由实例 传入路由映射哦诶之
（3）在Vue实例中挂载创建的实例

import VueRouter from 'vue-router';
import Vue from 'vue';
Vue.use(VueRouter);

const router = new VueRouter({
    routes,
})

3、使用vue-router的步骤
（1） 创建路由组件
（2） 配置路由映射，组件和路径映射关系
（3）使用路由：通过和

二、如何设置路由的默认

主要使用到重定向，
在routes中再配置一个映射
path配置的根路径 为“ ”或者 /
redirect 重定向，将我们根路径重定到想要设置的默认路径

 // 路由重定向
        path: '',
        redirect: '/home'

h5的history模式
改变路径的方式有两种
URL的hash
HTML5的history
默认情况下，路径的改变使用的URL的hash
如果要使用HTML5的history模式 在 vuerouter实例中配置

const router = new VueRouter({
    routes,
    mode: 'history',   //改变路径方式改为history

三、router-link其余属性

to 用于指定跳转路径
tag 指定router-link会被渲染成什么组件
replace 只会替换路径，不会留下history记录，不能前进或者后退
active-class 相当于class

<router-link to="/home" tag="button" replace active-class="active">首页</router-link>
    <router-link to="/about" tag="button" replace active-class="active">关于</router-link>

四、路由代码的其他跳转方式

可以使用 > $router.push('/home') 或者$router.replace('/home')

  methods: {
    homeClick() {
      this.$router.push("/home").catch((err) => err);
      //  this.$router.replace('/home')
    },

五、动态路由

当路径需要是 /user/aaa 或者/user/bbb时，除了前面的user之外后面还跟上用户的id
我们可以在路径后面写上id值

 {
      path: "/login/:id",
      component: Login,

<router-link to="/login/10086/user">User</router-link>

  return this.$route.params.userId;

六、路由的懒加载

当打包构建应用时javascript包变得非常的大 影响页面加载
我们需要把不同路由组件分割成不同代码块，被访问时才被加载 ，这样更加高效
路由懒加载主要作用就是将路由对应的组件打包成一个个js代码块，只有在路由被访问时，才加载对应组件

const home = () => import ('../components/Home');

七、嵌套路由

实现嵌套路由的步骤
创建对应的子组件，并且在路由映射中配置对应的子路由

 {
        path: '/home',
        component: home,
        meta: {
            title: "首页"
        },
        children: [{
                path: "",
                redirect: 'news',

            },
            {
                // 子路由路径不加 /
                path: 'message',
                component: message
            },
            {
                path: 'news',
                component: news
            }
        ]
    },

在组件内部使用router-view 标签

八、传递参数的方式

主要由params 和query
params类型
配置路由格式：> /router/:id
传递的方式 在path后面跟上对应的值
传递后形成的路径例如/router/123
query类型
配置路由格式 ：/router
传递方式对象中使用 query的key作为传递方式
传递后形成路径:/router?id=123

 <router-link :to="{path:'/profile',query:{name:'xiaoming',sex:'nan'}}">文件</router-link>

  .push({
          path: "/profile",
          // 传递参数
          query: {
            name: "zhangsan",
            sex: "nan",
          },
        })
        .catch((err) => err);

$route可以回去活跃状态组件的参数
例如 name path query params等参数

九、导航守卫也叫全局守卫

vue-router提供的导航守卫主要用来监听路由的进入和离开
vue-router提供了beforeEach和afterEach的钩子函数，他们会在路由即将改变前和改变后触发
导航钩子的三个参数
to：即将要进入的目标的路由对象
from:当前导航即将要离开的路由的对象
next：调用该方法才能进入下一个钩子

router.beforeEach((to, from, next) => {
    //  console.log(to, from);
    //路由进入之前，当前组件没有进行实例化
    next();
    document.title = to.matched[0].meta.title

});
// 后置钩子
router.afterEach((to, from) => {
    //  console.log(to, from);
})

导航守卫补充
路由独享的守卫
写在routes里面

{
        path: '/about',
        component: about,
        meta: {
            title: "关于"
        },
        // 路由独享守卫
        beforeEnter: (to, from, next) => {
            next();
            //     console.log("...");
        },
    },

组件内的守卫
写在组件内

export default {
  name: "profile",
  // 组件内的守卫
  beforeRouteEnter(to, from, next) {
    // 路由进入之前
    //   console.log("进入之前");
    next();
  },
  // 路由参数发生变化
  beforeRouteUpdate(to, from, next) {
    next();
    // console.log(this);
  },
  beforeRouteLeave(to, from, next) {
    next();
    // console.log("离开之前");
  },
};

十、keep-alive和vue-router

keep-alive是Vue内置组件可以使包含组件保留状态，避免重新渲染，如果组件被包裹，则不会结束生命周期，会保持活性
两个重要属性 include 只有匹配的组件会被缓存
exclude 任何匹配的组件都不会被缓存
当router-view被包含在keep-alive里面 所有的路径匹配的视图组件都会被缓存

十一、路由的动画

由于实质上是动态组件，因此我们可以使用组件以相同的方式对其应用过渡

 <transition name="fade" duration="200" mode="out-in">
      <router-view></router-view>
    </transition>

过渡样式需要自己写

.fade-leave-active {
  transition: transform 0.2s ease-in;
}
.fade-leave-to {
  transform: translatex(-100%);
}
.fade-enter-active {
  transition: transform 0.2s ease-in;
}
.fade-enter {
  transform: translatex(100%);
}