vue3 vue-router4 跳转总结

项目版本

"vue": "^3.2.37",
"vue-router": "^4.1.3"

项目中除了用<router-link :to="/路径">来通过创建a标签来定义导航链接外，我们还可以借助router的实例方法，来通过编写代码来实现页面的跳转

用法

声明式	编程式
<router-link :to="/路径">	import { useRouter } from "vue-router"; const router = useRouter(); router.push(...)

import { createRouter, createWebHistory } from "vue-router";
import Home from "@/views/home.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: Home,
    },
    /* bilibili热门排行榜 */
    {
      path: "/b-popular-rank",
      name: "BilibiliPopularRank",
      component: () => import("@/views/bilibili/popular-rank.vue"),
    }
  ],
});

export default router;

比如定义一个跳转方法

const goPage = () => {
  
  // 字符串路径就是path那个路径字符串 等同 router.push("b-popular-rank")
  router.push("/b-popular-rank"); 
  
  // 带有path路径的对象，等同于 router.push({ path: "b-popular-rank" });
  router.push({ path: "/b-popular-rank" });
  
  // 命名name的路由
  router.push({ name: "BilibiliPopularRank" });
};

带参数

// name 跟 params 不在地址栏带参 http://127.0.0.1:5173/b-popular-rank 刷新会丢失
router.push({ name: "BilibiliPopularRank", params: { name: "jack" } });

// path 跟 query hash地址栏带参 http://127.0.0.1:5173/b-popular-rank?name=jack 刷新不丢失
router.push({ path: "/b-popular-rank", query: { name: "jack" } });

单独定义

当指定 params 时，可提供 string 或 number 参数（或者对于可重复的参数可提供一个数组）。任何其他类型（如 undefined、false 等）都将被自动字符串化。可选参数，你可以提供一个空字符串（""）来跳过它。

// name params

const username = "jack";
const goPage = () => {
  router.push({ name: "BilibiliPopularRank", params: { username } });
};

页面接收

const route = useRoute();

console.log(route.params) // { username: "jack" } 

// path query

const username = "jack";
const goPage = () => {
  router.push({ name: "BilibiliPopularRank", query: { username } });
};

页面接收

// http://127.0.0.1:5173/b-popular-rank?username=jack

const route = useRoute();

console.log(route.query) // { username: "jack" }