编程式的导航 | vue push query
除了使用
除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。
导航到不同的位置 [1]注意: 下面的示例中的 router 指代路由器实例。在组件内部,你可以使用 $router 属性访问路由,例如 this.$router.push(...)。如果使用组合式 API,你可以通过调用 useRouter()[2] 来访问路由器。
想要导航到不同的 URL,可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的 URL。
当你点击 <router-link> 时,内部会调用这个方法,所以点击 <router-link :to="..."> 相当于调用 router.push(...) :
声明式编程式<router-link :to="...">router.push(...)该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:
js// 字符串路径 router.push(/users/eduardo) // 带有路径的对象 router.push({ path: /users/eduardo }) // 命名的路由,并加上参数,让路由建立 url router.push({ name: user, params: { username: eduardo } }) // 带查询参数,结果是 /register?plan=private router.push({ path: /register, query: { plan: private } }) // 带 hash,结果是 /about#team router.push({ path: /about, hash: #team })注意:如果提供了 path,params 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path :
jsconst username = eduardo // 我们可以手动建立 url,但我们必须自己处理编码...