【vuejs】vue-router 路由跳转参数传递详解和应用场景及技巧

在Vue.js中，使用vue-router时，我们经常需要在路由跳转时传递参数。这里有几种方式来传递参数：

1. 使用query传递参数：适用于非路径参数，类似于GET参数。

// 定义路由
const routes = [
  { path: '/user', component: User }
]
 
// 通过`query`传递参数
this.$router.push({ path: '/user', query: { id: 123 }})
 
// 在User组件中获取参数
this.$route.query.id

2. 使用params传递参数：适用于需要在路径中包含参数的场景。

// 定义路由，`userId`是路径参数
const routes = [
  { path: '/user/:userId', component: User }
]
 
// 通过`params`传递参数
this.$router.push({ name: 'user', params: { userId: 123 }})
 
// 在User组件中获取参数
this.$route.params.userId

注意：当使用params时，如果目标路由的路径中不包含对应参数的占位符（如:userId），则params将不会生效，此时应使用query。

3. 使用name代替path：当路由的路径发生变化，使用名字可以减少因路径改变而需要更改代码的情况。

// 定义路由
const routes = [
  { path: '/user', name: 'user', component: User }
]
 
// 使用路由名字和参数
this.$router.push({ name: 'user', params: { id: 123 }})

4. 使用replace来替换而非添加新的历史记录：

this.$router.replace({ path: '/user', query: { id: 123 }})

5. 编程式导航：结合v-if或v-show来根据条件进行路由跳转。

// 在template中
<button @click="navigateToRegister" v-if="!isLoggedIn">Register</button>
 
// 在script中
methods: {
  navigateToRegister() {
    this.$router.push('/register')
  }
}

6. 使用watch来监听路由参数的变化：

// 在组件中
export default {
  watch: {
    '$route.query.id': {
      immediate: true,
      handler(newId) {
        this.fetchData(newId)
      }
    }
  },
  methods: {
    fetchData(id) {
      // 根据id获取数据
    }
  }
}

以上是使用vue-router进行参数传递的一些基本方法和场景。在实际开发中，可以根据需要灵活运用。