Vue ——路由：编程式导航-CSDN博客

本文链接：https://blog.csdn.net/weixin_63215361/article/details/147880729

除了使用< router-link>创建< a>标签来定义导航连接外，还可以使用routerd的实例方法，通过编写代码来导航，

Vue Router 提供的主要导航方法。主要有 $router.push、
$router.replace 和 $router.go 这三个方法。每个方法都有不同的用途和用法。

$router.push() 是最常用的导航方法，用于导航到新的路由。它会向历史记录栈中添加一条新的记录，因此用户可以通过浏览器的“后退”按钮返回到之前的页面。

$router.push() 是支持返回功能的，window.history对象的 forward、back 和 go 方法对应的Router实例的方法如下：
router.forward(); //加载历史列表中的下一个URL（前进）。
router.back(); //加载历史列表中的前一个URL（后退），等同于router.go(-1)。

这一节主讲$router.push导航方法

讲前申明注意
这一节很容易混淆params和query的使用场景，需要再次强调两者的区别。比如，params需要路由配置中有对应的动态段，而query不需要。同时，使用params时如果用path的话会被忽略，必须用name，这点需要特别提醒。

在 Vue.js 中，$router.push() 是实现编程式路由导航的核心方法，支持多种传参方式。以下是具体用法和传参场景的详

字符串：$router.push(’ home ’)
对象： $ router.push( { path : home } )
命名路由： $ router.push( { name:“组件名” ，params:{参数} } )
带查询参数： $ router.push( { path:“路径” ， query:{参数} } )

一、基础导航方式

路径字符串（直接跳转）
直接传递 URL 路径字符串，适合简单跳转：


// 跳转到 /home 路径
this.$router.push('/home');

// 跳转带查询参数（注意不要加空格！）
this.$router.push('/user?id=123');  // ✅ 正确
this.$router.push('/user? id=123'); // ❌ 错误（?后不要空格）

路径对象（通过 path）
使用对象描述目标路径，适合需要明确参数的场景：

// 跳转到 /home
this.$router.push(  { path: '/home' }   );

// 带查询参数（query）
this.$router.push({
  path: '/user',
  query: { id: 123, name: '张三' }
});
// 生成的 URL：/user?id=123&name=张三

二、高级传参方式

命名路由 + params（动态参数）
需在路由配置中声明 name 和动态参数 :id：

// 路由配置（router/index.js）
{
  path: '/user/:id',
  name: 'userDetail', // 路由的 name
  component: UserDetail
}

跳转时通过 name 和 params 传参：

// 跳转到 /user/123
this.$router.push({
  name: 'userDetail', // 使用路由配置中的 name
  params: { id: 123 } // 参数名必须与路由配置的 :id 一致
});

// 目标组件中获取参数
console.log(this.$route.params.id); // 输出：123

query 参数（查询字符串）
无需提前配置路由，直接在 URL 中拼接参数：

// 跳转到 /user?id=123
this.$router.push({
  path: '/user',
  query: { id: 123, from: 'home' }
});

// 路由配置（router/index.js）
{
  path: '/user'
  component: UserDetail
}

// 目标组件中获取参数
console.log(this.$route.query.id);   // 输出：123
console.log(this.$route.query.from); // 输出：'home'

三、混合传参（params + query）
同时传递动态参数和查询参数：

this.$router.push({
  name: 'userDetail', // 使用命名路由
  params: { id: 123 }, // 动态参数（路径中）
  query: { from: 'home' } // 查询参数（URL后）
});
// 生成的 URL：/user/123?from=home


// 路由配置（router/index.js）
{
  path: '/user/:id',
  name: 'userDetail', // 路由的 name
  component: UserDetail
}

========================================================================================================================================================================================================

示例1 ：路径字符串（直接跳转）

直接传递 URL 路径字符串，适合简单跳转：
链接页面.js

<div class="menu">
  <button type="button" @click="pushPage('/category')">女装</button>
</div>

<script>
export default{
    name:"main-index",
    methods:{
      pushPage(url){   
        this.$router.push(url)  
      }
    }
}
</script>

<style></style>

route.js(路由配置，即就是将链接和组将进行关系绑定，和关系传参)

{
  path: "/category",  //router.js中生成的动态路径参数 :id
  name: "category",
  component: () => import("./pages/category/index.vue") 
}

组件

<template>
  <div>分类页面<div>
</template>

<script>
export default{
    name:"category",
}
</script>

<style></style>

示例2 ：路径字符串（带参直接跳转）

直接传递 URL 路径字符串，适合简单跳转：

链接页面.js

<div class="menu">
  <button type="button" @click="pushPage('/category?cid=1&title=女装')">女装</button>    //带参数的字符串路径
</div>

<script>
export default{
    name:"main-index",
    methods:{
      pushPage(url){   
        this.$router.push(url)   ------传字符串路径作为参数
      }
    }
}
</script>

<style></style>

route.js(路由配置，即就是将链接和组将进行关系绑定，和关系传参)

{
  path: "/category",  //router.js中生成的动态路径
  name: "category",
  component: () => import("./pages/category/index.vue") 
}

组件：组件接收参数用{{$route.query. xx}}进行

<template>
  <div>分类的ID:{{$route.query.cid}},分类的名称：{{$route.query.title}}</div>
</template>

<script>
export default{
     name:"category",
    created(){
     console.log(this.$route.query.cid,this.$route.query.title)
    }
}
</script>

<style></style>

======================================================================================================================================================

示例3 . query 参数（查询字符串）

无需提前配置路由，直接在 URL 中拼接参数：

链接

<div class="menu">
  <button type="button" @click="pushPage( '/category', { cid: 1, title: '女装' }>女装</button>
</div>

<script>
export default{
  name:"main-index",
    methods:{
      pushPage(url ,queryParams){
        this.$router.push( { path:url, query:{queryParams} }  )  // 对象参数
      }
    }
}
</script>

<style></style>

route.js(路由配置，即就是将链接和组将进行关系绑定，和关系传参)

{
  path: "/category",  //router.js中生成的动态路径
  name: "category",
  component: () => import("./pages/category/index.vue") 
}

组件

<template>
  <div>分类的ID:{{$route.query.cid}},分类的名称：{{$route.query.title}}</div>
</template>

<script>
export default{
    name:"category",
    created(){
     console.log(this.$route.query.cid,this.$route.query.title)
    }

}
</script>

<style></style>

示例4. 命名路由 + params（动态参数）

需在路由配置中声明 name 和动态参数 :id：

链接

<div class="menu">
 <button type="button" @click="pushnamePage('/category',{cid:2})">男装</button>
</div>

<script>
export default{
  name:"main-index",
    methods:{
      pushnamePage(url,params){
      this.$router.push({name:"category",params:params})
    }
   }
    
}
</script>

<style></style>

route.js(路由配置，即就是将链接和组将进行关系绑定，和关系传参)

{
  path: "/category/:cid",  //router.js中生成的动态路径
  name: "category",
  component: () => import("./pages/category/index.vue") 
}

组件

<template>
  <div>分类的ID:{{$route.params.cid}}</div>
</template>

<script>
export default{
    name:"category",
    created(){
     console.log(this.$route.params.cid,this.$route.params.title)
    }

}
</script>

<style></style>