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}
相关推荐
liangshanbo12152 分钟前
React 19 vs React 18全面对比
前端·javascript·react.js
望获linux14 分钟前
【实时Linux实战系列】Linux 内核的实时组调度(Real-Time Group Scheduling)
java·linux·服务器·前端·数据库·人工智能·深度学习
Never_Satisfied17 分钟前
在 JavaScript 中,删除数组中内容为xxx的元素
java·前端·javascript
_菜鸟果果18 分钟前
Vue3+echarts 3d饼图
前端·javascript·echarts
Luffe船长1 小时前
前端vue2+js+springboot实现excle导入优化
前端·javascript·spring boot
Demoncode_y2 小时前
前端布局入门:flex、grid 及其他常用布局
前端·css·布局·flex·grid
明天最后2 小时前
使用 Service Worker 限制请求并发数
前端·service worker
java水泥工2 小时前
基于Echarts+HTML5可视化数据大屏展示-电信厅店营业效能分析
前端·echarts·html5·大屏展示
鹿鹿鹿鹿isNotDefined2 小时前
Pixelium Design:Vue3 的像素风 UI 组件库
前端·javascript·vue.js
运维行者2 小时前
知乎崩了?立即把网站监控起来!
前端·javascript·后端