vue3--vue-router四版本模板

安装

js 复制代码
npm i [email protected]

配置(在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}
相关推荐
王景程2 分钟前
如何测试短信接口
java·服务器·前端
安冬的码畜日常25 分钟前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
小杨升级打怪中30 分钟前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木34 分钟前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师1 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚1 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧1 小时前
HTML字符实体和转义字符串
前端·html
小希爸爸1 小时前
2、中医基础入门和养生
前端·后端
局外人LZ1 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
G_GreenHand1 小时前
Dhtmlx Gantt教程
前端