编程式导航(路由传值)
路由间传值:有这种方法,一种是显示在地址导航栏里,一种是不显示地址导航里1.params形式 :参数不显示在地址栏 (1)在app.vue中写入方法,点击按钮跳转到HelloWord的页面data(){num:2}methods:{goback(){this.$router.go(-1)},goHome(...
·
路由间传值:有这种方法,一种是显示在地址导航栏里,一种是不显示地址导航里
1.params形式 :参数不显示在地址栏
(1)在app.vue中写入方法,点击按钮跳转到HelloWord的页面
data(){
num:2
}
methods:{
goback(){
this.$router.go(-1)
},
goHome(){
// this.$router.push('/');
//这种形式参数不显示在地址栏
this.$router.push({name:'HelloWorld',params:{userId:this.num}})
//这种形式显示在地址栏
//this.$router.push({path:'/',query:{userId:this.num,name:'judy'}})
},
hi2(){
this.$router.push('/hi2'); //跳转到hi2
}
}
(2)上面的在HelloWorld.vue中获取参数值{{$route.params.userId}}
<h4>第一种方式:获取的参数:{{$route.params.userId}}</h4>
2.query形式:参数显示在地址栏
(1)写入js
//这种形式显示在地址栏
this.$router.push({path:'/',query:{userId:this.num,name:'judy'}})
(2)在html中获取
<h4>您获取的参数:{{$route.query.userId}}</h4>
每日小知识点:
vue-router项目启动,把url中的#好去掉
在router/index.js中写入 mode:'history';
export default new Router({
mode:'history', //项目启动把url带的#号去掉
router:[
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'HelloWorld', //路由名称
component: HelloWorld //对应的组件模版
}
]
})
作为一个程序员,最郁闷的事情是,面对一个代码块,却不敢去修改。更糟糕的是,这个代码块还是自己写的。
更多推荐
已为社区贡献7条内容
所有评论(0)