{
  name: 'detail',
  path: 'detail',
  component: Detail,

  //第一种写法：props值为对象，该对象中所有的key-value组合最终都会通过props传给Detail组件
  props: {a:900},

  //第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
  props:true,

  //第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
  props($route) {
    return {
      id: $route.query.id,
      title: $route.query.title
    }
  }
}

props:['id','title']

<router-link replace>News</router-link>

methods: {
  pushShow(m) {
    this.$router.push({
      name: 'detail',
      query: {
        id: m.id,
        title: m.title
      }
    })
  },
  replaceShow(m) {
    this.$router.replace({
      name: 'detail',
      query: {
        id: m.id,
        title: m.title
      }
    })
  },
  
  // this.$router.forward(); //前进
  // this.$router.back(); //后退
  // this.$router.go(n); //n为正，则前进n步。n为负，则后退n步
}

<keep-alive :include="['News', 'Message']"> 
  <router-view></router-view>
</keep-alive>

//全局前置守卫：初始化时执行、每次路由切换 前 执行
router.beforeEach((to, from, next) => {
//传入三个参数，to为目标组件的路由信息，from为原组件的路由信息，next为允许放行的方法
  if (to.meta.isAuth) {
  //判断当前路由是否需要进行权限控制。可在需要权限控制的组件路由配置中添加meta配置项
    if (localStorage.getItem("school") === "atguigu") {
    //权限控制的具体规则。此处为从localStorage中读取权限信息
      next();  //放行
    } else {
      alert("暂无权限查看");
    }
  } else {
    //不需要权限控制的组件直接放行
    next(); //放行
  }
});

//全局后置守卫：初始化时执行、每次路由切换 后 执行
router.afterEach((to, from) => {
//只有两个参数，没有next方法
  if (to.meta.title) {
  //判断组件的路由信息的meta中是否配置了title
    document.title = to.meta.title;  //修改页面的title
  } else {
    //否则为默认的页面title
    document.title = "vue_test";
  }
});

{
  name: 'news',
  path: 'news',
  component: News,
  meta: {isAuth:true, title:'新闻'},
  //独享守卫的配置项
  beforeEnter(to,from,next) {
    if (to.meta.isAuth) {  //判断当前路由是否需要进行权限控制
      if (localStorage.getItem('school') === 'atguigu') {
        next()
      } else {
        alert('暂无权限查看')
      }
    } else {
      next()
    }
  }
}

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
  ......
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
  ......
}

mode: 'history'