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
二、this.$route.
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
三、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对象等