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}
相关推荐
charlee4412 分钟前
行业思考:不是前端不行,是只会前端不行
前端·ai
Amodoro1 小时前
nuxt更改页面渲染的html,去除自定义属性、
前端·html·nuxt3·nuxt2·nuxtjs
Wcowin1 小时前
Mkdocs相关插件推荐(原创+合作)
前端·mkdocs
伍哥的传说2 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang4532 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
Trust yourself2432 小时前
想把一个easyui的表格<th>改成下拉怎么做
前端·深度学习·easyui
三口吃掉你2 小时前
Web服务器(Tomcat、项目部署)
服务器·前端·tomcat
Trust yourself2432 小时前
在easyui中如何设置自带的弹窗,有输入框
前端·javascript·easyui
烛阴2 小时前
Tile Pattern
前端·webgl
前端工作日常3 小时前
前端基建的幸存者偏差
前端·vue.js·前端框架