vue路由三种传参方式

vue路由三种传参方式

通过query传参

注意：和name配对的是params，和path配对的是query

使用path来匹配路由，然后通过query来传递参数，这种情况下 query传递的参数会显示在url后面?id=？

通过router-link to去跳转到一个页面 并传参id=10

    <router-link to="/login?id=10">登录</router-link>

在跳转的页面通过route.query接收参数

<h3>登录组件 --- {{ $route.query.id }}</h3>

通过params传参

传参并设置路由规则

    <router-link to="/login/10">登录</router-link>
          routes: [ // 路由规则的数组
        { path: '/', redirect: '/login' },
        { path: '/login/:id', component: login },
        { path: '/reg', component: reg }
      ],

通过$route.params.id接受参数

'<h3>登录组件 ---{{$route.params.id}} </h3>

使用$router.push传参

绑定一个点击事件 <button @click = “getDetail(3)”> 在methods中跳转路由代码如下
使用 {{$route.params.id}}

      methods: {
        getDetail(id){
            this.$router.push({path:`/login/${id}/`})//传参核心代码
        }
      },
	this.$router.push({path:`/login/${id}/`}) //目标路由  需要使用这个来接受参数

	routes: [ // 路由规则的数组
        { path: '/login/:id', component: login },
        { path: '/reg', component: reg }
      ],

其实$router.push有三种传参path:‘/login/${id}/是对应params去取值，另外两种
查询参数：通过push的query传参
this.$router.push({ path: '/news', query: { userId: 123 }});
使用params传参
this.$router.push({ name: 'news', params: { userId: 123 }})

使用router.push.params传参 刷新页面会失效
命名路由这种方式传递的参数，如果在目标页面刷新是会出错的

	 methods: {
        getDetail(){
            this.$router.push({ name:'login',params: { id: 123 }})
        }
      },//路由传参

	<h3>登录组件 ---{{$route.params.id}} </h3> //子组件获取参数
      routes: [ // 路由规则的数组
        { path: '/login', 
          name:'login',
        component: login },
        { path: '/reg', component: reg }
      ],

路由传递对象

JSON.stringify可以把js普通对象转换成json类型，然后传参

       handleClick(row) {
          var arr=JSON.stringify(row)
               //直接调用$router.push 实现携带参数的跳转
               this.$router.push("/map?obj="+encodeURIComponent(arr))
        } //传参
		//目标路由接受参数
      var list = decodeURIComponent(this.$route.query.obj);
      this.songList = JSON.parse(list);
      // console.log(this.songList);
      this.name = this.songList.name;

添加链接描述