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配置

imp