Vue— 路由的传参与取参
一、配置组件
1、配置子组件:
var Login = {
template: '#login'
}
var Register = {
template: '#register'
}
var User = {
template: '#user'
}
<template id="login">
<div>
<p>我是login组件</p>
</div>
</template>
<template id="register">
<div>register组件</div>
</template>
<template id="user">
<div>user</div>
</template>
2、在父组件中使用router-link与router-view组件
<div id="app">
<router-link :to="{name:'Login',query:{uid:'001',uname:'小王',pwd:'12344'}}">登录</router-link>
<router-link to="/register">注册</router-link>
<router-link to="/user">用户中心</router-link>
<router-view></router-view>
</div>
3、使用路由
Vue.use(VueRouter);
4、创建路由对象
const router = new VueRouter({
// 配置路由
routes: [{
path: '/login',
name: 'Login',
component: Login
}, {
path: '/register',
name: 'Register',
component: Register
}, {
path: '/user',
name: 'User',
component: User
}]
})
5、在父组件的数据层添加 router
6、在样式表里添加样式,.router-link-exact-active是规定好的样式,作用是能改变当前点击的组件的颜色,以增强视觉感
.router-link-exact-active{ color:skyblue; }
二、配置login组件的传参与取参
1、在视图层设置—配置(传参):
<router-link :to="{name:'Login',query:{uid:'001',uname:'小王',pwd:'12344'}}">登录</router-link>
这时点击登录会开始传参,地址栏变成:
2、在组件中设置—获取(取参):
login的子组件中:数据中心定义uid,uname以及pwd;然后将父组件传的参数赋值给对应变量。
var Login = {
template: '#login',
data() {
return {
uid: '',
uname: '',
pwd: ''
}
},
created: function () {
// $route 路由信息对象,只读对象
console.log(this.$route);
this.uid = this.$route.query.uid;
this.uname = this.$route.query.uname;
this.pwd = this.$route.query.pwd
}
}
login子组件视图层,将数据中心的数据取出显示在页面
<template id="login">
<div>
<p>我是login组件</p>
<p> 登录页<br> <b v-if="uid!=''">{{uid}}----{{uname}}----{{pwd}}</b> </p>
</div>
</template>
代码演示:
三、配置register组件的传参与取参
1、在视图层设置—配置(传参):
<router-link to="/register/111">注册</router-link>
可以看到这个参数是在路径之后的,所以在数据层我们需要将register的路径加以修改
2、修改配置路由:
const router = new VueRouter({
// 配置路由
routes: [{
path: '/login',
name: 'Login',
component: Login
}, {
path: '/register/:id',
name: 'Register',
component: Register
}, {
path: '/user',
name: 'User',
component: User
}]
})
将register的路径后面加上/:id,以保证传参准确
3、在子组件的数据层中的数据中心定义一个变量用来接收数据
var Register = {
template: '#register',
data: function () {
return {
rid: ''
}
},
created() {
console.log(this.$route);
this.rid = this.$route.params.id;
}
}
4、接收参数
<template id="user">
<div>子组件user</div>
<p>我接收到的参数是----{{info}}</p>
</template>
代码演示:
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果