vue cli中的vue-router详解:四种跳转方式
文章目录Vue-router1.最基本的跳转2.带参数的基本跳转3.通过query来定义地址栏键值对参数4.通过js跳转Vue-router1.最基本的跳转<router-link to="/demo1">demo1:Hello,world</router-link>2.带参数的基本跳转<router-link v-bind:to="{name:'demo1',par
·
Vue-router
1.最基本的跳转
<router-link to="/demo1">demo1:Hello,world</router-link>
2.带参数的基本跳转
<router-link v-bind:to="{name:'demo1',params:{userId:123}}">跳转到demo1穿参123</router-link>
此时,需要在index.js中的路由配置(path处)进行重新定义:写上包含的参数,当参数不固定时,需要在前面加上冒号,表示通配符。
{
path: '/demo1/:userId',
name: 'demo1',
component: Demo1
},
3.通过query来定义地址栏键值对参数
<router-link :to="{name:'demo1',params:{userId:456},query:{plan:'private',sex:'male'}}">query</router-link>
<!-- http://localhost:8080/#/demo1/456?plan=private&sex=male -->
4.通过js跳转
<button @click="toURL">跳转页面</button>
<script>
export default {
data(){
return{
}
},
methods:{
toURL:function(){
// this.$router.push({path:'/demo2'});
this.$router.push({name:'demo1',params:{userId:123},query:{plan:"public",sex:"female"}});
}
}
}
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)