[JavaScript知识库]vue学习-路由入门

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>