this.$route.query和this.$route.params的详解

一、this.$route.query的使用

1、router/index.js 文件

{ 
 path:'/bms',
 component: bms,
 //添加路由
 children:[
   {
    path:':shopid',
    component:guessdetail
   }
 ]     
}

2、传参

this.$router.push({
        path: '/bms/detail', 
        query:{
          Id: id
         }
        });

3、获取参数

this.$route.query.Id

案例：

// 传参
TitleManagement(row) {
  this.$router.push({
    path: "/bms/topicList",
    query: {
      id: row.id
    },
  });
}
// 获取参数
this.questionBankId = this.$route.query.id;

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

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

PS: 页面之间用路由跳转传参时，刷新跳转后传参的页面，数据还会显示存在

二、this.$route.params的使用

1、router/index.js 文件

{
 path:'/bms',
 component: bms,
 //添加路由
 children:[
   {
    path:"/detail",
    name:'detail',
    component:guessdetail
   }
 ]     
}

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

this.$router.push({
  name: 'detail', 
  params:{
  Id: id
  }
});

3、获取参数

this.$route.params.Id

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

http://localhost:8080/#/mtindex

PS: 页面之间用路由跳转传参时，刷新跳转后传参的页面，数据不存在

三、this.$router与this.$route区别与联系

$router : 是路由操作对象，只写对象

$route : 路由信息对象，只读对象

1,、this.$router是Vue Router的实例，包含了一些路由的跳转方法，钩子函数等.

想要导航到不同的url，则使用this.$router.push()  $router对象是全局路由的实例，是router构造方法的实例

路由实例方法:

• push(): push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。
• go(): 页面路由跳转 前进或者后退
• replace(): push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面， 不会向 history 栈添加一个新的记录。 一般使用replace来做404页面

2、this.$route对象表示当前的路由信息，包含了当前url解析得到的信息，包含当前的路径、参数、query对象等