VueRouter快速上手

最新推荐文章于 2024-09-24 22:23:34 发布

原创

最新推荐文章于 2024-09-24 22:23:34 发布 · 558 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

基础使用

标准通用模板

src/router/index.ts
先从 vuerouter 中导入三大件；
设置对应 component 的路由地址；
export 整个路由模块，createRouter 里面分别要写路由模式和路由信息；

请避免 router routes route 这些元素的混淆，他们各自代表不同的意思

import {
   
    createRouter, createWebHistory, RouteRecordRaw } from "vue-router";

const routes: Array<RouteRecordRaw> = [
  {
   
   
    path: "/",
    component: () => import("../components/xxx.vue"),
  },
];

export const router = createRouter({
   
   
  history: createWebHistory(),
  routes,
});

注册 router

针对 vue3，请使用 use 进行挂载

...
import {
   
    router } from "./router/index.js";

const app = createApp(App);
app.use(router);
app.mount("#app");

App.vue

router-link 配合 router-view 使用，故一个 template 里面可以有多个 router-link，但只能有一个 router-view
router-link 和面的 to 表示需要连接到那个路由页面，路径就写我们在 path 里面定义的路径
每次让 router-link 指定一个路径后，指定路径的页面就会显示到 router-view 插入的地方！！！

<template>
  <div>
    <h1>点击下方按钮切换对应的页面</h1>
    <router-link to="/">login</router-link>
    <router-link style="margin-left: 20px;" to="/reg">reg</router-link>
    <hr />
  </div>

  <router-view></router-view>
</template>