vue路由跳转

// Vue Router 路由跳转示例代码

// 1. 使用 this.$router.push 方法进行路由跳转
this.$router.push('/home'); // 直接跳转到 '/home' 路径
this.$router.push({ path: '/user', query: { id: 123 }}); // 带查询参数跳转到 '/user?id=123'
this.$router.push({ name: 'user', params: { userId: 123 }}); // 通过命名路由和参数跳转

// 2. 使用 this.$router.replace 方法进行路由替换
this.$router.replace('/about'); // 替换当前路径为 '/about'，不会在历史记录中留下记录

// 3. 使用 this.$router.go 方法前进或后退页面
this.$router.go(-1); // 后退一页
this.$router.go(1); // 前进一页

// 4. 在模板中使用 <router-link> 组件进行导航
<router-link to="/home">Home</router-link>
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

// 解释说明：
// - `this.$router.push`：用于添加新的历史记录条目并跳转到目标路径。
// - `this.$router.replace`：用于替换当前的历史记录条目，不会增加新的历史记录。
// - `this.$router.go(n)`：用于在浏览器历史记录中前进或后退 n 步。
// - `<router-link>`：Vue Router 提供的组件，用于声明式地导航到不同的路由。