Vue Router 安装和配置指南

吴熠策Georgiana

于 2024-09-13 21:59:14 发布

阅读量333

点赞数 4

本文链接：https://blog.csdn.net/gitblog_09189/article/details/142226494

版权

Vue Router 安装和配置指南

router 🚦 The official router for Vue.js 项目地址: https://gitcode.com/gh_mirrors/router6/router

1. 项目基础介绍和主要编程语言

项目基础介绍

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。它与 Vue.js 核心深度集成，使得构建复杂的单页面应用变得简单和直观。Vue Router 支持动态路由、嵌套路由、路由参数、导航守卫等功能，是 Vue.js 生态系统中的重要组成部分。

主要编程语言

Vue Router 主要使用 JavaScript 和 TypeScript 进行开发。

2. 项目使用的关键技术和框架

关键技术和框架

Vue.js: Vue Router 是 Vue.js 的官方路由库，因此与 Vue.js 紧密集成。
JavaScript/TypeScript: 项目主要使用 JavaScript 和 TypeScript 进行开发。
HTML/CSS: 用于构建用户界面和样式。

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

在开始安装 Vue Router 之前，请确保你已经完成以下准备工作：

安装了 Node.js 和 npm（Node Package Manager）。
已经创建了一个 Vue.js 项目（如果还没有，可以使用 vue create my-project 命令创建一个新项目）。

详细安装步骤

步骤 1: 安装 Vue Router

在终端中导航到你的 Vue.js 项目目录，然后运行以下命令来安装 Vue Router：

npm install vue-router@4

步骤 2: 配置 Vue Router

在项目中创建一个新的文件 src/router/index.js，并在其中配置 Vue Router。以下是一个简单的配置示例：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

步骤 3: 在 Vue 应用中使用 Vue Router

在 src/main.js 文件中，导入并使用刚刚创建的 router 配置：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

步骤 4: 创建视图组件

在 src/views/ 目录下创建 Home.vue 和 About.vue 组件，作为路由的目标组件。例如：

<!-- src/views/Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<!-- src/views/About.vue -->
<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

步骤 5: 在应用中使用路由

在 src/App.vue 中使用 <router-view> 标签来显示路由组件：

<!-- src/App.vue -->
<template>
  <div id="app">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <router-view/>
  </div>
</template>

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