Vue如何配置路由：三步完成Vue前端路由配置

1. 安装vue router
2. 创建router.js文件在根目录下
3. 修改App.vue文件

1. 安装vue router

npm install vue-router@4

2. 创建router.js文件在根目录下

import { createRouter, createWebHistory } from 'vue-router'
import HomePage from './view/dashboard/HomePage.vue'
import LoginPage from './view/auth/Login.vue'
import RegisterPage from './view/auth/Register.vue'
import KanbanPage from './view/dashboard/Kanban.vue'
import WelcomePage from './view/dashboard/WelcomePage.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomePage
  },
  {
    path: '/login',
    name: 'Login',
    component: LoginPage
  },
  {
    path: '/register',
    name: 'Register',
    component: RegisterPage
  },
  {
    path: '/kanban',
    name: 'Kanban',
    component: KanbanPage
  },
  {
    path: '/welcome',
    name: 'Welcome',
    component: WelcomePage
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

3. 修改App.vue文件以使用路由视图：

<template>
  <router-view/>
</template>

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

<style>
body {
  margin: 0;
}
</style>

<router-view> 是 Vue Router 提供的一个组件，它是一个占位符，用于渲染匹配当前路由的组件。

具体来说：

1. 路由匹配：当你访问不同的 URL 路径时，Vue Router 会根据你定义的路由规则匹配相应的组件。

2. 动态渲染：<router-view> 会自动渲染当前路由匹配的组件。比如：

   • 访问 / 时，它会渲染 HomePage 组件
   • 访问 /login 时，它会渲染 LoginPage 组件
   • 访问 /kanban 时，它会渲染 KanbanPage 组件

3. 占位符作用：它就像一个动态的容器，根据当前的路由状态决定显示哪个页面组件。

举个例子，当你访问网站根路径 / 时：

• Vue Router 检查路由配置，发现 / 对应 HomePage 组件
• <router-view> 就会渲染 HomePage 组件的内容
• 当你点击链接跳转到 /login 时
• Vue Router 匹配到 LoginPage 组件
• <router-view> 会替换当前显示的内容为 LoginPage 组件

这样就实现了单页应用（SPA）中不同页面之间的切换，而无需重新加载整个页面。

在你的项目中，我们把 <router-view/> 放在 App.vue 的模板中，这样整个应用就可以根据不同的 URL 显示不同的页面内容了。