vue学习-路由入门

最新推荐文章于 2023-11-25 22:21:15 发布

Rulelur

最新推荐文章于 2023-11-25 22:21:15 发布

阅读量307

点赞数 1

分类专栏： vue学习文章标签： vue.js

本文链接：https://blog.csdn.net/Rulelur/article/details/120928277

版权

vue学习专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在Vue项目中安装和使用vue-router，包括在`router.js`中配置路由，在`main.js`中引入路由器，以及在`App.vue`中使用`router-view`展示对应组件。同时提到了`router-link`用于在不刷新页面的情况下更改URL。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 安装

vue本身没有整合路由，是使用的vuer-router

npm install vue-router@4

2. 使用

router.js

可以使用嵌套路由，嵌套父组件也需要router-view

import { createRouter, createWebHistory } from "vue-router";
import Ha from "./components/Ha.vue";
import Hb from "./components/Hb.vue";

// 3. 创建路由实例并传递 `routes` 配置
export const router = createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: createWebHistory(),
  routes: [
    { path: "", component: Ha },
    { path: "/a", component: Ha },
    { path: "/b", component: Hb },
    // {
    //   path: '/users/:username',
    //   component: User,
    //   children: [
    //     { path: 'posts', component: UserPosts },
    //   ],
    // },
  ],
});

main.js

use(router)，使用router.js导出的router配置

import { createApp } from "vue";
import App from "./App.vue";
import { router } from "./router";

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

App.vue

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局

router-link类似a标签，使用它可以Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码

<template>
  <router-link to="/a">a组件</router-link>
  <router-link to="/b">b组件</router-link>

  <div id="rightPart">
    <router-view></router-view>
  </div>
</template>