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>
Logo

前往低代码交流专区

更多推荐