vue3--vue-router四版本模板

萧寂2024-05-18 16:02

安装

js 复制代码

npm i vue-router@4.X.X

配置(在src下新建router/index.js,放入以下内容)

js 复制代码

import { createRouter, createWebHashHistory } from "vue-router";
//引入组件
// import Home from "../views/Home.vue";
// import About from "../views/About.vue";

const router = createRouter({
  //哈希模式
  history: createWebHashHistory(),
  routes: [
    // 通过数组对象的形式，配置路径对应展示的组件。
    {
      path: "/",
      name: "shou",
      component: () => import("/src/views/home.vue"),
    },
    {
      path: "/fen",
      name: "fen",
      component: () => import("/src/views/fenlei.vue"),
    },
    {
      path: "/room/:id", // 动态传递参数
      name: "room",
      component: () => import("/src/views/room.vue"),
    },
    {
      path: "/:pathMatch(.*)*",  // 匹配所有的404页面访问
      name: "noPage", 
      component: () => import("../page/404.vue"),
    },
  ],
});
// 将 router 暴露出去  （export default 抛出方式）
export default router;

然后去main.js注册一下

js 复制代码

import { createApp } from "vue";
import "./style.css";
import router from "/src/router/index.js";
import App from "./App.vue";
const app = createApp(App);
app.use(router);
app.mount("#app");

跳转

js 复制代码

//演示一种,其他跳转一样
import { useRouter } from "vue-router";
const router = useRouter();
const xj = () => {
  router.push({
    name: "room",
    query: {
      id: 000000,
    },
  });

接收参数

js 复制代码

import { useRoute } from "vue-router";
const route = useRoute();
console.log(route.query.id) // 000000

获取地址栏里面的动态参数，就是上面的:id,如localhost:8080/room/123

js 复制代码

import { useRoute } from "vue-router";
const route = useRoute();
console.log("route", route.params);

// 打印内容：{id:123}