前言

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。以下是 Vue Router 的一些基本介绍：

1. 单页面应用（SPA） ：单页面应用是指整个应用只加载一次，用户在应用中的导航不会重新加载页面，而是通过动态加载内容来更新页面。

2. 路由（Route） ：路由是 URL 到组件的映射。Vue Router 允许你定义多个路由，每个路由映射到一个组件，当用户访问特定的 URL 时，就会显示对应的组件。

3. 路由模式：

   • hash 模式：使用 URL 的 hash 来模拟一个完整的 URL，适用于不支持 HTML5 History API 的浏览器。
   • history 模式：使用 HTML5 History API 来实现无刷新的页面跳转，URL 更加美观。

4. 路由定义：在 Vue Router 中，路由是通过 routes 配置来定义的。每个路由对象包含 path（URL 路径）和 component（对应的组件）。

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

5. 动态路由：Vue Router 支持动态路由，即 URL 中包含参数的部分，如 /user/:id。这些参数可以在组件中通过 this.$route.params 访问。

6. 嵌套路由：Vue Router 支持嵌套路由，允许你将一个路由的组件作为另一个组件的一部分。这在构建复杂的应用时非常有用。

在实战中来提升自己吧！

在创建Vue项目时，可以选择直接引入 Vue Router 进行单页面应用开发

开局就送大礼包，简直不要太爽！

送了一个路由文件类似这样

import { createRouter, createWebHistory } from 'vue-router'//引入了createRouter和createWebHistory方法

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

这样能很方便的使用

当然你也可以自己写路由

在终端中输入代码npm install vue-router@4在node环境中下载路由工具，然后像上面一样创建文件夹，再一步一步导入，在根组件和父组件都要导入方法 main.js、App.vue等等

告诉主函数我要使用到路由

做好准备工作后开始今天的实战项目：管理系统

在父组件App.vue中给出router-view路由出口，它是一个占位符，Vue Router会根据当前的路由状态动态地将对应组件渲染至该div

接着创建在App.vue下的两个子组件Login.vue和Home.vue

定义这两个组件的路由，在点击时动态地将对应组件渲染至该div

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path:'/login',
      component:() => import('../views/Login.vue')
    },
    {
      path:'/home',
      component:() => import('../views/Home.vue'),
    }
  ]
})

• 路由定义:

  • { path: '/login', component: () => import('../views/Login.vue') }: 定义了一个路由，路径为/login，组件为动态导入的Login.vue。这意味着当访问/login路径时，Vue将懒加载并显示Login组件。
  • { path: '/home', component: () => import('../views/Home.vue') }: 同样，定义了一个路径为/home的路由，组件为动态导入的Home.vue。访问/home时展示Home组件。

除此之外还需要定义重定向目标（即任何对网站根目录的访问请求都会自动被重定向到登录页面（/login）），引导用户先登录。

    {
      path: '/',
      redirect:'/login'
    },

登录页面Login.vue

在确定账号密码是否正确的方法上使用到了双向绑定

<div class="login-wrap">
        <div class="username flex">
          <label>账号：</label>
          <input type="text" v-model="username">
        </div>
        <div class="password flex">
          <label>密码：</label>
          <input type="text" v-model="password">
        </div>
        <div class="btn" @click="goHome">登录</div>
      </div>

• <input> 标签用于用户输入，类型分别为 text。通过 v-model="username" 和 v-model="password" 双向数据绑定到 Vue 实例的 username 和 password 数据属性上，实时同步用户输入的值。

• 并创建一个登录按钮，点击事件 @click="goHome" 绑定了一个名为 goHome 的方法。当用户点击这个按钮时，会触发 goHome 方法执行

const goHome = () => {
    if(username.value === 'admin' && password.value === '123'){
        router.push('/home')
    }else{
      alert('账号或密码错误')
    }

如果账户名或密码不正确，函数会通过浏览器的alert方法弹出一个警告框，提示用户“账号或密码错误”。

如果账户名和密码匹配正确，使用之前获取到的router实例调用push方法，将当前路由导航到/home路径，即跳转到首页。

在使用router方法之前需要获取实例并赋值，所以在JS代码头部引入Vue Router的方法。

  import { useRouter } from 'vue-router';
  const router = useRouter();

在这里我们使用了useRouter()函数中的push方法进行页面的跳转，在该函数中还有其他许多方法

1. router.push(location) : 导航到指定的location。这会向浏览器历史记录添加一个新的记录。如果location是字符串，它会被当作路径来处理；如果是一个对象，可以包含path、name或查询参数等。
2. router.replace(location) : 类似于push，但是它不会向历史记录添加新条目，而是替换当前的条目。用户不能通过浏览器的后退按钮回到上一个状态。
3. router.go(n) : 在浏览历史中前进或后退。n为正数表示前进，负数表示后退。
4. router.back() : 后退到上一个页面，相当于router.go(-1)。
5. router.forward() : 前进到下一个页面，相当于router.go(1)。
6. router.resolve(rawLocation) : 解析一个位置到一个可观察的路由位置对象。这对于从用户输入生成完整URL或预先解析路由非常有用。
7. router.getCurrentLocation() : 返回当前路由的定位信息对象，不引起任何导航。

源码部分展示

<template>
    <div class="login">
      <div class="login-wrap">
        <div class="username flex">
          <label>账号：</label>
          <input type="text" v-model="username">
        </div>
        <div class="password flex">
          <label>密码：</label>
          <input type="text" v-model="password">
        </div>
        <div class="btn" @click="goHome">登录</div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const username = ref('admin')
  const password = ref('')

  const goHome = () => {
    if(username.value === 'admin' && password.value === '123'){
        router.push('/home')
    }else{
      alert('账号或密码错误')
    }
}

主页面Home.vue

主页面分为三个部分，头部、左身体部分，以及右身体部分

在左身体部分又设计了三个组件，在右方可以更新三个组件中的内容

而这三个属性在点击后不会通过页面的跳转来实现内容的更新，而只是在Home页面中更新

那么我们需要将这三个组件的路由作为Home页面的子组件创建在Home的路由下

那么本设计完整的路由如下

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect:'/login'
    },
    {
      path:'/login',
      component:() => import('../views/Login.vue')
    },
    {
      path:'/home',
      component:() => import('../views/Home.vue'),
      children:[
        {
          path:'/home',
          redirect:'/class'
        },
        {
          path:'/class',
          component:() => import('../views/pages/Class.vue'),
        },
        {
          path:'/teacher',
          component:() => import('../views/pages/Teacher.vue')
        },
        {
          path:'/job',
          component:() => import('../views/pages/Job.vue')
        },
      ]
    },
  ]
})
export default router

• 在使用队列创建这三个子组件时使用到了vue中的v-for指令来遍历menu数组

• 使用router-link组件将菜单项与路由路径绑定，点击菜单项可以跳转到对应的页面。:key属性用于给每个列表项一个唯一的键值，以优化渲染性能。

• js部分输入需要传入的组件数据

• 使用Vue Router中的组件<router-view>，它是一个占位符，Vue Router会根据当前的路由状态动态地将对应组件渲染到右半边。

<template>
    <header class="header">
        <div class="title">萌萌后台管理</div>
        <div class="user-info"> 欢迎宁</div>
    </header>
    <section class="body">
        <aside class="menu">
            <ul>
                <li class="menu-item" v-for="(item,index) in menu":key="index">
                    <router-link :to="item.path">{{item.Name}}</router-link>
                </li>
            </ul>
        </aside>
        <main class="main">
            <router-view></router-view>
        </main>
    </section>
</template>

<script setup>
import { ref } from 'vue'

const menu = ref([
    {id:1,Name:'班级管理',path:'/class'},
    {id:1,Name:'僵尸列表',path:'/teacher'},
    {id:1,Name:'工作统计',path:'/job'},
])
</script>

接下来再组件的css样式编写及组件的完善

这里就简略不写了。。。。。。

在主函数的样式设计中可以将页面不美观的样式全部一起设计去掉 在reset css网页中找到这段代码引入main.js中的样式即可

CSS Tools: Reset CSS (meyerweb.com)

• background-image:linear-gradient(to right,#ea8cf0,#52c0e5);给背景实现渐变的效果
• cursor: pointer;当鼠标移动到该块上面时变化鼠标形状
• display: flex;遇到找位置问题，遇事不决上flex

总结

路由

路由是 URL 到组件的映射。Vue Router 允许你定义多个路由，每个路由映射到一个组件，当用户访问特定的 URL 时，就会显示对应的组件。

组件

1. router-link 是个a标签，点击后可跳转或者在当前页面更新内容
2. router-view 路由出口，显示更新的内容

路由跳转

1. router-link
2. router.push() 属于是编程式导航
3. router.replace()

路由定义

routes: [ { path:'/login', component:() => import('../views/Login.vue') }