vue router-link 动态赋值和this.$rout

一、vue  传参以及参数的作用

1.路径：http://localhost:8081/#/test?name=1

<router-link :to="{path:'/test',query:{name:id}}">跳转<router-link>跳转(id是参数)

使用：this.$route.query.id

2.路径：http://localhost:8081/#/test/1

<router-link :to="{path:'/test/'+id}">跳转<router-link>(id是参数)路由：

使用：this.$route.params.id（这个id给上图路由的配置有关）

this.$route是一个数组，里面包含路由的所有信息

注意：router-link中链接如果是‘/’开始就是从根路由开始，如果开始不带‘/’，则从当前路由

另外：如果想在页面内直接去渲染{{$route.query.id}}即可

如果动态传递多个参数，那么方法是：

<router-link :to="{path:'/test',query:{id:item.id,num:item.des}}">

如果使用的是name和require的结合那么必须注意的是在router里的index.js里面一定要有对应的name，另外name切记不能加"/"

<router-link :to="{name:'test',params:{id:item.id}}">

除此之外还有一种形式的路由跳转：

this.$router.push({path:'/list'}),当然还可以通过query传递参数

this.$router.replace({path:'/list'}),当然还可以通过query传递参数