vue（6）-vuerouter（2）路由跳转方式

一、router-link

 1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航 

 2. params -> 是要传送的参数,参数可以直接key:value形式传递 

 3. query -> 是通过 url 来传递参数的同样是key:value形式传递 

二、$router

• this.$route.query

1、传参数

this.$router.push({undefined

        path: '/mtindex/detail', query:{shopid: item.id}

 });

2、获取参数

this.$route.query.shopid

或者this.doctorDetails = JSON.parse(getUrlKey('item')) ;

const getUrlKey=function(name) {

    // console.log('Dx',name)

  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null

    };

export default getUrlKey

3、url的表现形式(url中带有参数)

http://localhost:8080/#/mtindex/detail?shopid=1

• this.$route.params

1、传参数（ params相对应的是name  query相对应的是path）

this.$router.push({undefined

        name: 'detail', params:{shopid: item.id}

 });

2、获取参数

this.$route.params.shopid

3、url的表现形式(url中没带参数)

http://localhost:8080/#/mtindex

• query和param传参区别

1、如果query，，即使后退路由也会保留上一次的参数，不会导致页面取不到this.$route.query.shopid

2、如果是params，1-2-3， 1到2，给了params参数，但是3后退到2.没有params，就取不到this.$route.params.shopid，但是也有解决办法，见第四条

3、注意query

如果传递的是对象，而且涉及到前进后退

传参：

this.$router.push({

        path: "/doctorHome",

        query: {

          item:JSON.stringify(item),

        },

      });

接收：this.doctorDetails = JSON.parse(this.$route.query.item);

否则，3-2取不到item，会直接[object Object]，而不是展开这个对象。没有后退则没问题。

4、注意params，也可以变成query形式，需要在路由时定义/:item。但这种不适合多个页面跳它，且传不同参数。

{

    path: '/doctorHome/:item',

    name: 'doctorHome',

    meta: {

      title: "预约时间选择"

    },

    component: () => import('../views/doctorHome.vue')

  }

后续传参如果是对象，跟query一样，用JSON.stringify和JSON.Parse