vue3--vue-router四版本模板

安装

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}
相关推荐
bug_kada几秒前
前端后端3步联调:Cookie认证实战,让登录功能完美上线!
前端·javascript
stringwu几秒前
Flutter开发者必备:状态管理Bloc的实用详解
前端·flutter
青晚舟1 分钟前
作为前端你必须要会的CICD
前端·ci/cd
hj5914_前端新手2 分钟前
深入分析 —— JavaScript 深拷贝
前端·javascript
中微子2 分钟前
虚拟列表完全指南:从零到一手写实现
前端
jqq6663 分钟前
解析ElementPlus打包源码(二、buildFullBundle)
前端·javascript·vue.js
YaeZed11 分钟前
TypeScript6(class类)
前端·typescript
织_网12 分钟前
UniApp 页面通讯方案全解析:从 API 到状态管理的最佳实践
前端·javascript·uni-app
emojiwoo1 小时前
前端视觉交互设计全解析:从悬停高亮到多维交互体系(含代码 + 图表)
前端·交互
xxy.c1 小时前
嵌入式解谜日志—多路I/O复用
linux·运维·c语言·开发语言·前端