router传参接参（详细）router.beforeEach()

方法一：使用query来传递参数，传递的时候参数显示在地址栏中，不安全

1.传参页面写法如下：点击传参按钮页面跳转到DingDan，把数组datalist[]传递过去

HTML的方式
　　<router-link :to="{name:xxx,query:{datalist: this.datalist}}"></router-link>

JS的方式
<template>
  <div>
    <a @click="routerTo()">query传参</a>
  </div>
</template>

 routerTo() {
      this.$router.push({
        path: "/DingDan",
        query: {
          datalist: this.datalist
        }
      });
  }

2.接参页面写法如下：

方法一：this.$router.currentRoute.query.datalist

方法二：this.$route.query.datalist

方法二：使用params来传递参数，传递的时候参数不在地址栏中显示

1.传参页面写法如下：

HTML的方式
　　<router-link :to="{name:xxx,params:{page:1,code:8899}}"></router-link>

JS的方式
<template>
  <div>
    <a @click="routerTo()">params传参</a>
  </div>
</template>

 routerTo() {
      this.$router.push({
        name: "DingDan",    //跳转页面的name
        params: {
           page: '1', code: '8989'
        }
      });
  }

2.接参页面写法如下：

console.log("接数据",this.$route.params.page);

前两种方法都是比较常用的传参方法下面总结一下区别：

query可以通过name属性或者path属性来引入路由，而params只能通过name属性来引入路由；在使用params传递时如果指定了path属性而没有name属性，那么界面能成功跳转但是不能接受到传递过来的参数
query相当于get请求，跳转页面的时候可以在地址栏中看到请求的参数，而params相当于post请求参数则不会在地址栏中显示
在刷新界面时，query传递的参数不会丢失，而params会丢失

方法三：冒号的形式传递传参

在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由

       {
         path:'/one/reg/:num',
         component:Reg,
}

1.传参页面写法如下： 

<router-link to="/one/log/123"></router-link>

2.接参页面写法如下：

this.$route.params.num

补充路由跳转：

在Vue2.0路由跳转中，除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 实例方法，通过编写代码来实现。

router.push(location)

点击<router-link :to="..."> 等同于调用 router.push(...)，

想要导航到不同的 URL，使用 router.push 方法

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。 

 // 字符串
router.push('home')
 
// 对象
this.$router.push({path: '/login?url=' + this.$route.path});
 
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
 
// 带查询参数，变成/backend/order?selected=2
this.$router.push({path: '/backend/order', query: {selected: "2"}});
 
// 设置查询参数
this.$http.post('v1/user/select-stage', {stage: stage})
      .then(({data: {code, content}}) => {
            if (code === 0) {
                // 对象
                this.$router.push({path: '/home'});
            }else if(code === 10){
                // 带查询参数，变成/login?stage=stage
                this.$router.push({path: '/login', query:{stage: stage}});
           }
});
 
// 设计查询参数对象
let queryData = {};
if (this.$route.query.stage) {
    queryData.stage = this.$route.query.stage;
}
if (this.$route.query.url) {
    queryData.url = this.$route.query.url;
}
this.$router.push({path: '/my/profile', query: queryData});

案例（typescript）： 

 const routerTo = (path: string) => {
      router.push(path);
    };

router.beforeEach() 的用法

路由跳转前都是会经过beforeEach，而beforeEach可以通过next来控制到底去哪个路由。根据这个特性我们就可以在beforeEach中设置一些条件来控制路由的重定向

to => route : 即将进入的目标路由对象
from => route : 当前导航正要离开的路由
next => function： 一定要调用该方法来 resolve这个钩子，执行效果以来 next 方法的调用参数 

router.beforeEach((to, from, next) => {
    console.log("to", to)
    console.log("from", from)
    if (to.path == '/') {
        next({ path: 'home'})
    } else {
        next()
    }
});