vue学习五：前端路由VueRouter

vuerouter的主要优点有

实现单页面应用（SPA）路由切换不用刷新整个页面，只更新视图部分，实现页面之间的跳转。
管理组件与 URL 的映射关系 定义哪个路径对应显示哪个组件，比如 /home 显示首页组件，/user 显示用户页组件。

在官网找到安装命令，vue2安装3版本，vue3安装4+版本

复制代码

npm install vue-router@4

在目录中创建components包，存放显示页面组件，添加任意字段可供显示即可

（注意组件名必须同时遵守大驼峰以及多单词规则，Demo1以及demoone命名均会报错）

router包存放路由规则，所创建的index.js是默认访问目录，可以省去路径详写。

index.js文件：

复制代码

// 1. 导入 Vue Router 4 的核心方法（Vue 3 不再需要导入 Vue 本身）
import { createRouter, createWebHashHistory } from 'vue-router'

// 2. 导入页面组件（路径保持不变）
import DemoOne from '../components/DemoOne.vue'
import DemoTwo from '../components/DemoTwo.vue'
import DemoThree from '../components/DemoThree.vue'

// 3. 定义路由规则（和原逻辑一致，仅格式优化）
const routes = [
  { path: '/demo1', component: DemoOne },
  { path: '/demo2', component: DemoTwo },
  { path: '/demo3', component: DemoThree }
]

// 4. 创建路由实例（Vue 3 核心写法：createRouter + 明确指定history模式）
const router = createRouter({
  // 原Vue2的hash模式，对应Vue3的createWebHashHistory()
  history: createWebHashHistory(),
  routes // 路由规则
})

// 5. 导出路由实例，供main.js挂载
export default router

App.vue关键代码：

复制代码

<template>
  <div id="app">
    <!-- 声明路由链接 -->
    <router-link to="/demo1">todemo1</router-link>
    <router-link to="/demo2">todemo2</router-link>
    <router-link to="/demo3">todemo3</router-link>

    <!-- 声明路由占位标签 -->
    <router-view></router-view>
  </div>
</template>

链接传输至demo1，网页显示链接为todemo1，类似html的<a>标签。

并在main.js中导入router路由路径