Vue3 引入路由配置（保姆级笔记）

1、安装vue-router

在src目录下运行git bash，用一下命令安装vue-router：

npm install --save vue-router

当你运行此命令，安装vue-router后，他会自动将vue-router添加到package.json的dependencies中。（有兴趣的同学可以查找看一下）

创建路由配置文件

在项目src目录中，创建router文件，并在其中创建index.js文件，用于配置路由。

src/router/index.js

//从vue-router 包中导入createRouter 和 ceateWebHistory，用于创建路由示例和设置历史模式
import { createRouter, createWebHistory } from 'vue-router';
import HomePage from '../views/HomePage.vue'; // 对应 HomePage 组件
import AboutPage from '../views/AboutPage.vue'; // 对应 AboutPage 组件

// 定义路由规则，每个路由对象包含路劲（path）、名称（name）和对应的组件（component）
const routes = [
  {
    path: '/',  //访问根路径时
    name: 'HomePage',  //路由名称，可用于编程式导航
    component: HomePage,  //显示HomePage 组件
  },
  {
    path: '/About', //访问/About路径时
    name: 'AboutPage',  //路由名称
    component: AboutPage, //显示AboutPage组件
  },
];

// 创建路由实例，并指定使用 HTML5 历史模式（createWebHistory），避免使用哈希（#）
// 同时将定义好的路由规则传入
const router = createRouter({
  history: createWebHistory(),  // 启用 HTML5 History 模式
  routes, // 路由配置数组
});

export default router;  // 导出路由实例，供 main.js 等文件引入使用

在主应用中引入路由

在 src/main.js 中引入并使用路由。

src/main.js：

import { createApp } from 'vue'
import App from './App.vue'
//全局引入 axios
import axios from 'axios'

//引入路由配置到项目
import router from './router'


const app = createApp(App);
app.config.globalProperties.$axios = axios;

app.use(router) //注册路由

app.mount("#app");

   

其中：

app.use(router)：将路由插件注册到 Vue 应用中。

router：从 src/router/index.js 导入的路由实例。

创建视图组件

创建路由对应的视图组件。例如，在 src/views 目录下创建：

• HomePage.vue：首页组件。
• AboutPage.vue：关于页面组件

src/views/HomePage.vue：

<template>
  <h1>首页</h1>
</template>

<script>
export default {
  name: "HomePage", // 修改为多单词名称
};
</script>

src/views/AboutPage.vue：

<template>
  <h1>关于页面</h1>
</template>

<script>
export default {
  name: "AboutPage", // 修改为多单词名称
};
</script>

在App.vue中添加路由视图

在 src/App.vue 中使用 <router-view> 组件显示路由匹配的组件内容。

src/App.vue

<template>

  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
  </nav>
  <router-view></router-view>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    //HelloWorld
  }
}
</script>

<router-link>：用于创建导航链接，to 属性指定目标路由路径。

<router-view>：占位符，渲染与当前路径匹配的组件。