【前端项目实操】VUE路由简介及使用指南

创作时间:

作者:

@小白创作中心

【前端项目实操】VUE路由简介及使用指南

引用

CSDN

https://blog.csdn.net/weixin_42340721/article/details/139354707

Vue路由是Vue.js中非常重要的一个概念，它允许我们根据浏览器地址栏中的URL路径来显示不同的组件内容。本文将详细介绍Vue路由的使用方法，并结合Vue3的知识点，让大家能够轻松掌握Vue路由的使用。

Vue路由简介及使用指南

在Vue.js中，路由是一种非常核心的概念，它允许我们根据浏览器地址栏中的URL路径来显示不同的组件内容。简单来说，路由就是将组件与地址栏中的路径相匹配，使得用户在浏览不同的页面时，能够看到对应的组件内容。本文将详细介绍Vue路由的使用方法，并结合Vue3的知识点，让大家能够轻松掌握Vue路由的使用。

一. Vue路由的4个步骤

步骤1: 安装路由

前提条件：先检查项目中是否有安装路由，操作步骤如下：

1.1）步骤一：项目中找到package.json

1.2）步骤二：在package.json中查看是否有vue-router

假如通过上述步骤，我们未找到vue-router，这个时候就需要在Vue项目中安装路由。安装路由的方法非常简单，只需要在终端中输入以下命令即可：

npm install vue-router

安装完成后，我们可以在项目的
package.json
文件中查看是否已经安装了
vue-router
。

步骤2: 开启路由

在Vue项目中，我们需要在
main.js
文件中开启路由。具体操作是导入并使用路由：

import { createApp } from 'vue'  
import App from './App.vue'  
import router from './router' // 导入路由配置  
createApp(App).use(router).mount('#app') // 使用路由

步骤3: 配置路由

路由的配置文件位于
src/router
目录下的
index.js
文件中。在这个文件中，我们可以配置路由的路径和对应的组件。例如：

import { createRouter, createWebHistory } from 'vue-router'  
import Home from '../views/Home.vue'  
const routes = [  
  {  
    path: '/',  
    name: 'Home',  
    component: Home  
  },  
  {  
    path: '/about',  
    name: 'About',  
    // 懒加载，当访问到这个路由时才加载对应的组件  
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')  
  }  
]  
const router = createRouter({  
  history: createWebHistory(process.env.BASE_URL),  
  routes  
})  
export default router