vue-router实现组件间的跳转（参数传递）
程序员文章站
2022-07-06 21:11:02
通过vuerouter来实现组件之间的跳转：参数的传递，具体内容如下
login ---用户名--->main
①明确发送方和接收方
②配置接收方的路由地址...
通过vuerouter来实现组件之间的跳转：参数的传递，具体内容如下
login ---用户名--->main
①明确发送方和接收方
②配置接收方的路由地址
{path:'/mytest',component:testcomponent}
-->
{path:'/mytest/:id',component:testcomponent}
③接收方获取传递来的数据
this.$route.params.id
④跳转的时候，发送参数
this.$router.push('/mytest/20')
<router-link :to="'/mytest'+id">跳转</router-link>
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>传参</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<!--指定容器 -->
<router-view></router-view>
</div>
<script>
//创建主页面组件
var mymain = vue.component("main-component",{
//保存登录传递过来的数据
data:function(){
return {
uname:''
}
},
template:`
<div>
<h1>主页面用户名:{{uname}}</h1>
</div>
`,
//挂载该组件时自动拿到数据
beforemount:function(){
//接收参数
console.log(this.$route.params);
this.uname = this.$route.params.myname ;
}
})
//创建登录页面组件
var mylogin = vue.component("login-component",{
//保存用户输入的数据
data:function(){
return {
userinput:""
}
},
methods:{
tomain:function(){
//跳转到主页面，并将用户输入的名字发送过去
this.$router.push("/main/"+this.userinput);
console.log(this.userinput);
}
},
template:`
<div>
<h1>登录页面</h1>
<input type="text" v-model="userinput" placeholder="请输入用户名">
<button @click="tomain">登录到主页面</button>
<br>
<router-link :to="'/main/'+userinput">登录到主页面</router-link>
</div>
`
})
var notfound = vue.component("not-found",{
template:`
<div>
<h1>404 page not found</h1>
<router-link to="/login">返回登录页</router-link>
</div>
`
})
//配置路由词典
const myroutes = [
{path:"",component:mylogin},
{path:"/login",component:mylogin},
//注意冒号,不用/否则会当成地址
{path:"/main/:myname",component:mymain},
//没有匹配到任何页面则跳转到notfound页面
{path:"*",component:notfound}
]
const myrouter = new vuerouter({
routes:myroutes
})
new vue({
router:myrouter,
el:"#container",
data:{
msg:"hello vuejs"
}
})
// 注意,路由地址
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>传参练习</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<!-- -->
<router-view></router-view>
</div>
<script>
//创建产品列表组件
var mylist = vue.component("product-list",{
//保存产品列表的数据
data:function(){
return{
productlist:["苹果","华为","三星","小米","vivo"]
}
},
template:`
<div>
<h4>这是列表页</h4>
<ul>
<li v-for="(tmp,index) in productlist">
//将index传递过去
<router-link v-bind:to="'/detail/'+index">{{tmp}}</router-link>
</li>
</ul>
</div>
`
})
//详情页组件
var mydetail = vue.component("product-detail",{
//保存传递过来的index
data:function(){
return{
myindex:""
}
},
//在挂载完成后,将接收到的index赋值给myindex
mounted:function(){
this.myindex = this.$route.params.id;
},
template:`
<div>
<h4>这是详情页</h4>
<p>这是id为：{{myindex}}的产品</p>
</div>
`
})
//页面找不到的时候
var notfound = vue.component("not-found",{
template:`
<div>
<h1>404 page not found</h1>
</div>
`
})
// 配置路由词典
const myroutes = [
{path:"",component:mylist},
{path:"/list",component:mylist},
{path:"/detail/:id",component:mydetail},
{path:"*",component:notfound},
]
const myrouter = new vuerouter({
routes:myroutes
})
new vue({
router:myrouter,
el:"#container",
data:{
msg:"hello vuejs"
}
})
</script>
</body>
</html>
关于vue.js的学习教程，请大家点击专题vue.js组件学习教程、vue.js前端组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。