vue cli中的vue-router详解：四种跳转方式

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>