一个实战demo带你了解vue的Router

前言

vue的Router是什么？

Vue Router是Vue.js框架的官方路由管理器，专为构建单页面应用而设计。它允许开发者通过简单的配置管理和控制应用程序的路由，即用户在不同的页面或视图之间导航的过程。

简单的说，vue中所有的xxx.vue文件都是一个组件，这些组件最终会被vue读取，并编译成一段div结构，挂载在唯一的html文件中，所以，想要实现组件之间的切换很简单，但是，由于每个页面对应的url都是唯一的，我们想要将某些组件当成页面来用，在默认情况下就行不通，这时就需要上"科技"。我们就需要一个可以将代码片段的切换模拟成页面的跳转的样子的这样的一个手段，这就是vue-router。单页面应用其实就是在模拟页面的切换。

正文

接下来小编就带大家以一个实战的小demo来带大家一起来深入了解路由。

登录页面

先看效果

在这个项目中刚开始是一个登录的界面，当用户输入账号与密码点击登录后，就能跳转到下面图书管理系统这个界面。

同时，在图书管理系统的菜单栏中有四个菜单栏，点击对应的菜单栏同样可以实现每个页面的跳转，对应显示每个页面的内容。里面的内容就是咱们切页面的工作了，这里今天给大家讲的是路由，所以里面的内容和样式就没写哈。从图中地址栏上面的url可以看到，地址已经不一样了，实现了页面的跳转。这就是路由的作用。

这个项目是怎么实现的呢？话不多说，咱们开干！

首先，咱们需要创建咱们的项目，在一个文件的终端中打开，通过npm create vue@latest命令，使用vue框架创建一个manage-demo项目

创建完之后在它的子文件夹中就会有一个manage-demo文件，项目打开后的目录有这些文件：

接着在该终端的命令行输入 npm i装入咱们项目所需要的依赖和源码。

然后输入npm run dev将咱们的项目跑起来。

首先咱们先实现一个简单的登录界面（css样式代码我就放在最后面了）：

<template>
  <div>
    <div class="login">
      <h3>图书管理系统</h3>
      <div class="user">
        <span>账号：</span><input type="text" v-model="user" />
      </div>
      <div class="pwd">
        <span>密码：</span><input type="text" v-model="pwd" />
      </div>
      <div class="btn">
        <button @click="login">登录</button>
      </div>
    </div>
  </div>
</template>

那么在这个登录页面咱们如何实现输入账号密码点击登录后就跳转到home页呢？很简单。

1.新创建一个home页面。

2.为该页面配置路由。

3.在登录按钮里的点击事件里实现路由跳转。

1.创建home页

2.配置路由

这里咱们再创建项目时，他就会询问我们需不需要配置一些东西，其中就有咱们需要的路由配置。咱们选是，他会默认下载引入vue-router模块，并且生成一些已经配置好的一些文件，一个main.js文件夹。这样就不需要我们自己去引入和配置了。

只需在这个main.js的routes数组中进行配置

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"),

这里我给大家解释一下这个

{ path: "/", redirect: "/login" }这个路由规则定义了一个路径为"/"（默认项目是在根路径下）的路由。当用户访问根路径也就是打开浏览器时，redirect属性会立即将其重定向到"/login"路径，即登录页面。这一步是路由重定向，作用也就是让浏览器打开默认就是login页面。

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

当用户访问路径为"/login"时，将加载并显示Login.vue组件作为页面内容。这里使用了箭头函数结合动态导入（import()）的方式懒加载组件，这意味着Login.vue组件只有在实际访问该路由时才会被加载。

{ path: "/home", component: () => import("../views/Home.vue") }

同样地，当用户访问路径为"/home"时，将加载并显示Home.vue组件。

配完路由后就可以显示吗，不不不，这里你只是相当于配好了该页面的路由，但是并不知道这个组件页面需要在哪里展示，因此咱们需要在留下一个路由路口用来展示该页面。咱们到项目最外层的根组件App.vue中来写上路由路口，因为所有的.vue文件都要在这个根组件中渲染展示。咱们只需要在App.vue中加入这个语句

这就叫咱们在根组件下放下了一个路由路口，接下来你配的所有的一级路由只要命中了那个路由路径，这个组件就会被加载到这个路由路口来，就相当于这个组件的代码会搬到这里来显示，然后整个App.vue又被搬到了唯一的那个html文件中显示，所以这个路由页面就可以在浏览器上得到一个展示。

3.在登录点击事件里实现路由跳转

<script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
const state=reactive({
    user:" ",
    pwd:" "
})
const router=useRouter();
const login=()=>{
    if(state.user!==" "&&state.pwd!==" "){
        //console.log(123)
        localStorage.setItem("user",state.user)
        router.push("/home")
    }
}
</script>

这里

• const state = reactive({ user: " ", pwd: " " }) 创建了一个响应式的状态对象，包含两个属性：user 和 pwd，初始值均为空格字符。这用于存储用户输入的用户名和密码。

定义的 login 函数用于处理登录逻辑。当用户名和密码都不为空时，将用户名存储到本地存储 localStorage 中，并通过 router.push('/home') 跳转到 /home 路由对应的页面。

这样我们就了解一级路由了。

home页面

效果展示：

接下来我带大家通过home这个页面来带大家了解一下二级路由。

首先创建基本页面：

<div class="home">
      <header class="header">
        <div class="name">图书管理系统</div>
        <div class="userInfo">
          <span>欢迎 {{ user }}</span>
        </div>
      </header>
      <section class="main">
        <div class="menu">
          <ul class="menu-list">
            <li class="list-item" v-for="item in menu" :key="item.title">
              <router-link :to="`/home${item.path}`">{{
                item.title
              }}</router-link>
            </li>
          </ul>
        </div>

        <div class="content">
          <RouterView></RouterView>
        </div>
      </section>
    </div>

创建完之后咱们如何实现左侧点击这个菜单栏分别能够去到不同的页面呢？

按照刚刚的思路，咱们同样也是三步走：

1.创建每一个二级页面

2.配置路由

3.在每个事件里添加router-link实现路由跳转。

1.在view文件夹下中创建一个子文件夹pages里面再创建4个新页面：

2.配置路由

{
      path:"/home",
      component:()=>import("../views/Home.vue"),
      children:[
        {
          path:"/home/category",
          component:() => import("../views/pages/Category.vue")
        },
        {
          path:"/home/search",
          component:() => import("../views/pages/Search.vue")
        },
        {
          path:"/home/add-book",
          component:() => import("../views/pages/Addbook.vue")
        },
        {
          path:"/home/borrow",
          component:() => import("../views/pages/Borrow.vue")
        }
      ]
    }

怎么给这四个页面配路由呢？咱们知道这四个页面是home页面里的二级页面，所以就应该在home下配置子路由，子路由配在home路由下面，用一个children[]来配子路由，如上。当路径来到不同的二级页面路径时，就会加载该部分的组件。

同样别忘记了在要展示的content页面中放下一个路由路口。将这些内容渲染到这个地方来。

3.在每个事件里添加router-link实现路由跳转。

先创建一个用来存储菜单数据：

const menu = [
    {id: 1, title: '图书分类', path: '/category'},
    {id: 2, title: '查询图书', path: '/search'},
    {id: 3, title: '添加图书', path: '/add-book'},
    {id: 4, title: '借阅管理', path: '/borrow'}
  ]
export default menu

通过import { menu } from "../menuData";可以导入数据。

咱们通过v-for来渲染每一条数据

<li class="list-item" v-for="item in menu" :key="item.title">
              <router-link :to="`/home${item.path}`">{{
                item.title
              }}</router-link>
</li>

同时添加router-link:to ="每一个页面的路径"，当鼠标点击每一个菜单时，都能跳转到相应的路径上。

至此我们就实现了二级路由的效果了。

总结

这篇文章通过一个小demo向大家介绍了路由的知识与使用，其实路由的使用主要就在路由的配置，和对每一个页面的渲染，希望看完本文你能够对路由有更深的了解。这个Demo的全部源码大家可以到我的gitee仓库上查看。gitee.com/Luo-zhao-fa...

可以点个免费的赞赞嘛，感谢感谢！