Vue路由传参

this.$router 和 this.$route

• this.$router 用来操作路由比如 push
• this.$route 用来获取路由信息比如

this.$route.name // 路由名称
this.$route.Path // 不带参数路径
this.$route.fullPath // 完整路径
this.$route.query // query参数
this.$route.params // params参数

路由传参(声明式)

html

<!--name为路由里面的名字也可以写为**path** -->
<router-link to="{path: `/path/${id}`}">路径拼接数据</router-link>
<router-link :to="{ name: 'query', query: { id: 1 }}">query数据</router-link>
<router-link :to="{ name:'params',params:{name:'abc'}}">params数据</router-link>
<router-view></router-view>

js

routes: [
  {
      name: "path",
      path: "/path/:id",
      component: Path
  },
  {
      name: "query",
      path: "/query",
      component: Query
  },
  {
        // 测试发现'/:id'可以省略，加上了之后跟路由拼接效果一致
      name: "params",
      path: "/params",
      component: Params
  }
]

获取参数

console.log(this.$route.params);
console.log(this.$route.query);
console.log(this.$route.params);

1.路径拼接

2.query

3.params

路由传参(编程式)

html

<span @click="clickPath">路径拼接数据</span>
<span @click="clickQuery">query数据</span>
<span @click="clickParms">params数据</span>
<router-view></router-view>

路由和methods

methods: {
    clickPath (id) {
        this.$router.push(`/path/${id}`);
    },
    clickQuery() {
        this.$router.push({ name: "query", query: { id: 1 } });
    },
    clickParms() {
        this.$router.push({ name: "params", params: { name: 'abc' } });
    }
},
routes: [
  {
      name: "path",
      path: "/path/:id",
      component: Path
  },
  {
      name: "query",
      path: "/query",
      component: Query
  },
  {
        // 测试发现'/:id'可以省略，加上了之后跟路由拼接效果一致
      name: "params",
      path: "/params",
      component: Params
  }
]

获取参数

console.log(this.$route.params);
console.log(this.$route.query);
console.log(this.$route.params);