Vue Router 的概念及使用

1.Vue Router的概念

   Vue Router 是 Vue.js 官方提供的路由管理器。

   Vue Router通过将不同的 URL 映射到不同的组件来实现页面的切换和导航。

2.要在 Vue 应用程序中使用 Vue Router，您可以按照以下步骤进行操作：

  (1) 安装 Vue Router：建议在创建项目的时候直接安装路由，帮助我们完成路由的所有配置操作

       vue2的路由：vue-router3

       vue3的路由：vue-router4

// 安装和引入Vue Router
npm i vue-router@3 --save             //vue2
npm i vue-router@4 --save             //vue3
import VueRouter from 'vue-router'

  (2) 创建路由器实例：在 Vue 应用程序的入口文件中导入 Vue 和 Vue Router并创建一个新的 Vue Router 实例

   const router = new VueRouter({ routes })

  (3) 配置路由：在路由器实例的配置选项中，定义路由的映射关系。

• 使用 routes 属性定义路由数组，每个路由对象都包含 path 和 component 之间的映射关系

// 路由的配置文件
import { createRouter, createWebHashHistory } from "vue-router";


// 导入自己的vue组件
import Hello from "../views/Hello.vue";

// 配置路由信息
const routes = [
  // path 书写组件访问时的路径
  // component访问指定的路径后需要渲染的那个组件
    { path: "/hello", component: Hello }
    
];

// 创建路由的实例对象,并书写对应的配置信息
const router = createRouter({
    //  路由的模式（历史模式、哈希模式）
    history: createWebHashHistory(),
    // 路由的映射表
    routes: routes,
});

// 导出路由对象
export default { router };

(4) 在main.js 绑定路由

import './assets/main.css'
​
import { createApp } from 'vue'
import App from './App.vue'
​
// 我们需要在唯一的项目入口的js文件中导入自己书写的路由配置文件
import router from './router/index.js';
​
const app = createApp(App);
// 将路由绑定的app上
app.use(router);
app.mount('#app')

(5) 编写组件（vue文件）: 即在路由配置中指定的组件

(6) 在模板中使用 <router-view> 和 <router-link>组件

• <router-view> 是一个占位符，用于渲染匹配到的路由组件，一般书写在App.vue 中

  <template>
    <div>
       <h3>首页</h3>
       <!-- 配置出口位置 -->
       <RouterView></RouterView>      //路由出口，一般书写在App.vue 中
    </div>
  </template>   

• <router-link> 是一个用于导航到不同路由的链接

    <router-link :to="{ name: 'home' }">Home</router-link>   //点击页面中Home跳转到对应路由
    <router-link :to="{ name: 'about' }">About</router-link>