目录
步骤1:router-link 标签 to属性添加参数 id (不需要修改 路由规则的 path 属性)
***5、this.$route.query.id 是怎么来的?
一、前言
上两篇文章我们介绍了:路由(vue-router)的基本使用、tag属性和router-link的使用、路由redirect重定向的使用-设置默认页面、设置选中路由高亮的两种方式,详细可参见博文:
原创 Vue笔记整理,专题之路由:3、路由(vue-router)的基本使用、tag属性和router-link的使用
原创 Vue笔记整理,专题之路由:4、路由redirect重定向的使用-设置默认页面、设置选中路由高亮的两种方式
这篇博文我们将介绍:路由传参-使用query方式传递参数
二、路由传参-使用query方式传递参数
1、路由实例简约版:router挂载简写
之前介绍了路由的基本使用,现在我们继续写一个类似的简单实例,之前加了注释,这里之前的注释就不加了。
然后在它的基础上演示:使用query方式传递参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>08.路由规则传参方式1_query</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
var login = {
template: '<h1>登录组件</h1>'
}
var register = {
template: '<h1>注册组件</h1>'
}
var router = new VueRouter({
routes: [
{ path: '/login', component: login },
{ path: '/register', component: register }
],
})
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// router: router
router//如上面属性值和属性名完全一样,可以简写成这样。到时候浏览器会帮我们解析成上面的结构
});
</script>
</body>
</html>
之前这些,我们介绍的都是单纯的跳转代码,现在我们来给它添加一些参数。
2、使用query方式传递参数
步骤1:router-link 标签 to属性添加参数 id (不需要修改 路由规则的 path 属性)
首先我给 router-link 标签,加上一个 id=10 的参数代码,如下图:
路由实例的路由匹配规则 routes 里面,并没有进行相应改变
我们运行程序,虽然浏览器url地址多了id=10
但是 router-link标签的to 仍然能匹配到 routes的path
说明:如果在路由中,使用 查询字符串,给路由传递参数,则 不需要修改 路由规则的 path 属性
那么怎么在组件内部拿到这个参数id呢?
步骤2:在组件内部拿到这个参数id
组件有它的生命周期 ,我们在登录组件里面,写一个它的生命周期方法 created,并输出相关对象:
var login = {
template: '<h1>登录组件</h1>',
created() { // 组件的生命周期钩子函数
// this代表当前组件,$route 表示当前路由信息对象
console.log(this.$route)
}
}
运行程序,点击登录进行切换,检查元素,我们来看一下输出结果:
然后我们可以这样来获取 id 的值:this.$route.query.id
var login = {
template: '<h1>登录组件</h1>',
created() { // 组件的生命周期钩子函数
// this代表当前组件,$route 表示当前路由信息对象
console.log(this.$route)
console.log(this.$route.query.id)
}
}
那么怎么把 id的值 放到 h1标签里面
步骤3:把 id的值 放到 h1标签里面
可以使用 插值表达式,然后我们之前可以写一个data方法,这样在组件里面输出
运行程序,点击登录进行切换,我们来看一下效果
那么我们同样可以这样,来输出 id的值
运行程序,点击登录进行切换,我们来看一下效果
3、使用query方式传递多个参数
步骤1:router-link标签 to属性加参数
我们再在 router-link 加一个 name参数,如下图:
步骤2:登录组件 里面输出
然后同样在 登录组件 里面,这样输出就行
运行程序,点击登录进行切换,我们来看一下效果
4、最终修改后的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>08.路由规则传参方式1_query</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
<!-- 如果在路由中,使用 查询字符串,给路由传递参数,则 不需要修改 路由规则的 path 属性 -->
<router-link to="/login?id=10&name=zs">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
var login = {
// //this 代表当前组件的实例,默认可以省略
// //template: '<h1>登录组件---{{ this.msg }}</h1>',
// template: '<h1>登录组件---{{ msg }}</h1>',
// data() {
// return {
// msg: '123'
// }
// },
template: '<h1>登录组件---{{ $route.query.id }}---{{ $route.query.name }}</h1>',
created() { // 组件的生命周期钩子函数
// this代表当前组件,$route 表示当前路由信息对象
console.log(this.$route)
console.log(this.$route.query.id)
}
}
var register = {
template: '<h1>注册组件</h1>'
}
var router = new VueRouter({
routes: [
{ path: '/login', component: login },
{ path: '/register', component: register }
],
})
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// router: router
router//如上面属性值和属性名完全一样,可以简写成这样。到时候浏览器会帮我们解析成上面的结构
});
</script>
</body>
</html>
***5、this.$route.query.id 是怎么来的?
如果你不知道这个怎么来的,你可以这样操作:输出 vm实例
步骤1:
运行程序,点击登录进行切换,它会切换到路径:xxxxxx.html#/login?id=10&name=zs
步骤2:
检查元素,点击Console,在打印输出位置输入vm,enter回车(别忘记)
步骤3:找到 routerRoot下面的 $route
步骤4:
点击右边的 三个点,左边会弹出一个三角形,点击展开如下:
现在我们知道:this.$route.query.id 是怎么来的了吧!
另外需要注意的是输出的对象 vm ,是 Vue 的实例对象vm
如果你尝试把名字改了,再去浏览器输出,会报如下错误: