Vue的Router路由传参

Vue的Router路由传参,第1张

Vue的Router路由传参


一、文件结构


二、vue.js

打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 

复制粘贴页面的所有内容


三、vue-router.js

打开此链接  https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js

复制粘贴页面的所有内容


四、index.html

 <!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>title</title>
</head>
<body>
<div id="app"> <div>
path属性内传参 :name <br>
获取传参 {{$route.params.name}}<br> url路径内传参 ?age = 18 & sex = 男(不需要加引号!)<br>
获取传参 {{$route.query.age}} {{$route.query.sex}}<br> 通过点击事件,设置setTimeout()方法,间隔时间后,
触发回调函数内的vue实例的router属性的push()方法,实现手动路由<br>
第一种方式:<br>
setTimeout(function(){<br>
this.router.push("/username/汪")<br>
},2000);<br>
<br>
第二种方式:<br>
//传入一个对象,name属性表示路由的名字,params属性表示需要给哪个参数传值
//比如下面给名称为username_router的路由中path为/userMessage/:name/:age传参
setTimeout(function(){ <br>
this.router.push({name:"userMessage_router",params:{name:"汪",age=27}})<br>
},2000);<br>
<hr>
</div> <!-- 上面是重点笔记,结合代码验证 --> <router-link to="/login">login</router-link>
<router-link to="/user/王花花">王花花</router-link>
<button @click="surf">漫游</button>
<br>
<router-link to="/userMessage/未知/未知">我的信息</router-link>
<button @click="getMessage">点击获取</button> <router-view></router-view>
</div> <script src="../lib/vue.js"></script>
<script src="../lib/vue-router.js"></script>
<script src="js/app.js"></script>
</body>
</html>


五、app.js

 var routes = [
{
path:"/login",
component:{
template:`
<h1>
登录
</h1>
`
}
},
{
path:"/user/:name",
name:"myrouter",
component:{
template:`
<div>
我的名字叫{{$route.params.name}}<br>
今年{{$route.query.age}}岁了 <br>
我是{{$route.query.sex}}生 <router-link to="more" append>更多信息</router-link>
<router-view></router-view>
</div>
`
},
// 子路由的格式与父路由一样
children:[
{
path:"more",
component:{
// 子路由继承父路由的路径参数params
template:`
<div>
这是{{$route.params.name}}的详细信息:<br>
高配马公婆赶紧跑了啊东安街公安朵拉购IE的父</div>
`
}
}
]
},
{
path:"/userMessage/:name/:age",
name:"userMessage_router",
component:{
template:`
<div>
名字:{{$route.params.name}}<br>
年龄:{{$route.params.age}} </div>
`
}
} ]; var router = new VueRouter({
routes
}); // 设置时间,手动访问和传参 new Vue({
el:"#app",
router,
methods:{
surf:function(){
// setTimeout()方法,第一个参数为回调函数,
// 第二个参数为间隔多少毫秒后,开始出发回调函数
setTimeout(function(){
// this.router表示调用Vue实例内部的router属性,然后再调用其push()方法
// push()方法内传入需要跳转的路由路径
this.router.push("/login");
setTimeout(function(){
// this.router.push("/user/汪");
// 手动传参,传入一个对象,name属性表示路由的名字,params属性表示需要给哪个路径参数
// 传值
this.router.push({name:"myrouter",params:{name:"高富帅"}});
},2000)
},2000)
},
getMessage:function(){
setTimeout(function(){
// this.router.push("/userMessage/汪/27");
this.router.push({name:"userMessage_router",params:{name:"汪汪",age:28}})
},2000);
}
}
})


六、效果


七、谢谢观看,如有问题,随时交流哦

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/585875.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-12
下一篇 2022-04-12

发表评论

登录后才能评论

评论列表(0条)

保存