vue动态路由使用

vue动态路由使用

vue-router里面的配置

{
     path: '/Descr/:id',
     name: 'Descr',
     component: Descr
   }


//跳转时页面
var id = 1;
this.$router.push('/Descr/' + id)
 
//跳转后页面获取参数
this.$route.params.id

通过query属性传值（url中不显示参数）

//跳转时页面
this.$router.push({
  path: '/Descr',
  query: {
    name: '李四'，
    id: 3,
  }
})
 
//跳转后页面获取参数对象
this.$route.query 

通过params属性传值（url中显示参数）

//跳转时页面
this.$router.push({
  name: '/Descr',
  params: {
    name: '李四'，
    id: 1,
  }
})
 
//跳转后页面获取参数对象
this.$route.params

///父路由组件上使用router-link进行路由导航，传参用<router-link to="/one/login/001">的形式向子路由组件传递参数。使用router-view进行子路由页面内容渲染

总结：

1.动态路由和query属性传值 页面刷新参数不会丢失， params会丢失

2.动态路由一般用来传一个参数时居多(如详情页的id), query、params可以传递一个也可以传递多个参数

如果在Vue项目中传递的参数是一整个对象可以使用JSON.stringify将参数转换一下

// 跳转路由传递对象参数
var arr=JSON.stringify(this.对象)
this.$router.push('/Descr'+encodeURIComponent(arr))

接收参数的时候，先用decodeURIComponent()将传递过来的参数转换一下，然后再用JSON.parse再次转换，这样，一个对象就完整的传递过来了，

      // 获取传过来的参数
      var list = decodeURIComponent(this.$route.params.obj);
      this.对象 = JSON.parse(list);

注意：文件流数据file不能使用这个方法，因为file数据一用JSON来转换，就为空了，所以也不能用本地存贮，但可以使用vuex来保存