vue的三种跳转方式

1.跳转方式

1.1 直接跳转

to里边写上跳转的路径

<router-link to="/team">跳转方式1</router-link>

1.2. 动态跳转

<router-link :to="{name:'team',params:{userId:123}}">跳转方式2</router-link>

<router-link :to="{name:'team', params:{userId:456}, query:{plan:'active'}}">跳转方式3</router-link>

params和query为vue的两种传参的方式，下面有讲到这两种的区别

1.3.js跳转

<button @click="toUrl">点击事件跳转</button>

js :
methods: {
            
      toUrl(){
           
          // this.$router.push({path:'/team'});
          // this.$router.push({name:'team',params:{userId:789}});
          this.$router.push({name:'team',params:{userId:789}, query:{plan:'active'}});
      }
}

注意：这里是this.$router ,有 r 的

2.接收参数：

页面跳转到team页了，如何接收传过来的参数呢？

带参数的跳转，需要在route/index.js中配置路由，比如这里跳转到team页面，team的路径配置为：

{
    name:'team',
    path:'/team/:userId',
    component:()=> import('pages/team')
 }

配置路由后，然后再team页面中就可以获取参数了：

export default {
     name:'Team',
     mounted () {
            //获取传过来的参数
         const userId= this.$route.params.userId;
         const plan = this.$route.query.plan;
         console.log(userId);
         console.log(plan);
            
            
     },
}

注意：这里是this.$route, 没有 r .

3.params和query的区别

3.1参数传递的地址链接不同

通过params传过来的参数，地址是这样的:

http://localhost:8080/#/team/123



通过query传过来的参数，地址是这样的:

http://localhost:8080/#/team/456?plan=active

3.2 关于路由中的传递的参数的配置

params传参是需要在路由中配置需要传递的参数的，刷新 传递的参数还在；

params如果不在路由中配置，则地址栏的地址是不带参数的，类似post传值，但是一刷新，传递的参数就会消失。

query不需要配置，它的参数是使用‘?’拼在地址后面的，类似get传值。