Vue Router带你玩转单页面应用，妈妈再也不怕我迷路了！

六个点
331 阅读5分钟

引言

在我们实现单页面应用的过程中，路由管理是不可或缺的一个环节。Vue Router作为Vue.js的官方路由管理器，使我们非常方便地处理页面之间的导航和路由控制。接下来就让我们通过一个小demo来了解Vue Router。

PixPin_2024-12-30_02-26-42.gif

要实现以上页面跳转的效果，就需要用到Vue Router，它允许你定义应用的路由规则，并管理页面之间的导航。路由就是指根据不同的URL请求，分配展示不同的 vue 组件的过程。

Vue Router的引入使用

官方文档：router.vuejs.org/zh/

我们通过一个小demo来使用Vue Router实现跳转效果，通过查看官方文档，首先我们使用npm install vue-router@4在终端安装Vue Router。

然后在src路径下创建一个名为views文件夹，里面先创建一个Login.vue文件的用来放登录页面，里面写些基本样式。

// Login.vue
<template>
  <div class="login">
    <h2>旅梦的后台管理系统</h2>
    <div class="login-box">
      <input type="text" name="" id="" v-model="username">
      <input type="text" name="" id="" v-model="password">
      <button @click="login">登录</button>
    </div>
  </div>
</template>

image.png

接着在views文件夹中新建一个Home.vue文件用于存放首页的页面。

// Home.vue
<template>
  <div class="home">
    <div class="head">
      <div class="logo">旅梦的后台管理系统</div>
      <div class="user">
        <span>Welcome, </span>
      </div>
    </div>
    <div class="main">
      <div class="menu"></div>
      <div class="content"></div>
    </div>
  </div>
</template>

image.png

然后需要给登录按钮绑定点击事件，使其点击会跳转上面的Home.vue页面，这时候就需要用到Vue Router了，在 src 下面创建一个 router 文件夹，里面再创建一个 index.js 文件。首先导入从 vue-router 包中导入 createRouter 函数，定义一个路由数组，每个路由都是一个对象，包含path（路径）和component（返回import()调用的函数）等属性，然后再创建一个路由实例，最后再抛出这个路由以便在该项目的其它文件中接收。

// ./router/index.js
import { createRouter, createWebHistory } from "vue-router";
import Login from "../views/Login.vue";  // 静态加载，无论有没有使用一开始直接加载组件

// 定义路由数组
const routes = [
  {
    path: "/login",
    component: Login
  },
  {
    path: "/home",
    component: () => import("../views/Home.vue")  // 动态加载该路径下的组件，只有在访问时才会加载
  }
]

// 创建路由实例
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: routes
})

// 抛出路由
export default router

然后设置路由的显示位置，也就是路由的出口。

image.png

将 Login 与 Home 各添加进路由抛出后，就需要首先在全局入口main.js安装这个路由实例

// main.js
import router from './router/index.js'   //  可省略后面的 /index.js
createApp(App).use(router).mount('#app')

然后在给登录按钮绑定点击跳转事件。

// Login.vue
<script setup>
import { useRouter } from 'vue-router';  // 加载useRouter函数

const router = useRouter()    // 这里使用的是单例模式，都在一个路由上操作

const login = () => {
  router.push({ path: '/home' })  // 导航到 `/home` 路径
}
</script>

这样就可以实现点击登录跳转了。

PixPin_2024-12-30_01-14-38.gif

Vue Router的传参

path + query:{} 传参

router.push({path: '/xxx', query: {xxx: xxx}}) 携带参数跳转

比如在上面的 Login.vue 的跳转router.push在后面加上query: {xxx: xxx}即可把该数据携带到要跳转的 Home 页面，如下。

<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue'

const router = useRouter()

const username = ref('')
const login = () => {
  router.push({ path: '/home', query: { name: username.value } })
}
</script>

将输入的用户名中的值传出去。里面也可以多写几个要传的值，这里我们只传一个值看看效果。

然后我们在 Home.vue 组件中使用 useRoute 接收。

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
console.log(route);

</script>

注意这里是useRoute，而不是useRouter。

  1. useRouter 是获取路由的实例对象，它和router 文件夹下的 index.js 中的路由对象是同一个
  2. useRoute 是获取当前路由的信息

然后再用 <span>Welcome, {{ route.query.name }}</span> 渲染到 welcome 后面。

image.png

name + params:{} 传参

const login = () => {
  router.push({ name: '/Home', params: { name: username.value } })
}

这样写的话就需要在./router/index.js下面配置路由时需要增加一个属性name：

const routes = [
  {
    path: "/login",
    name: "Login",
    component: Login
  },
  {
    path: "/home/:name",  // 需在path中写上 /:name
    name: "Home",
    component: () => import("../views/Home.vue")
  }
]

然后route.params.name渲染即可，但是一般建议使用第一种方法传参。

二级路由

当我们来到首页点击左侧菜单时，右边内容也应该跳转到对应 url 位置。

  1. vue-router提供了一个全局组件 router-link
  2. router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)
  3. router-link提供了声明式导航高亮的功能(自带类名)
<div class="menu">
    <ul>
      <li>
        <router-link to="/home/user">用户管理</router-link>
      </li>
      <li>
        <router-link to="/article">文章管理</router-link>
      </li>
      <li>
        <router-link to="/catgory">分类管理</router-link>
      </li>
    </ul>
  </div>

./router/index.js 路由下在 home 路由下配置子路由，使用 children 来配置子路由也就是二级路由，当然三级四级路由都可以配置，只需一层一层嵌套即可。

const routes = [
  {
    path: "/login",
    component: Login
  },
  {
    path: "/home",
    component: () => import("../views/Home.vue"),
    children: [{
      path: "/home/user",   // 因为 user 路由是 home 的子路由，路径设置成"/home/user"更加优雅
      component: () => import("../views/User.vue")
    }
    ]
  }
]

路由显示位置：

image.png

每个路由组件都是在其父组件的<router-view>内部渲染的，所以不同路由的显示位置不会冲突。

PixPin_2024-12-30_02-09-14.gif

一般情况下点击登录后菜单应该会选择一个默认的子菜单显示，所以我们需要使用redirect重定向。

const routes = [
  {
    path: "/login",
    component: Login
  },
  {
    path: "/home",
    component: () => import("../views/Home.vue"),
    children: [{
      path: "/home/user",
      component: () => import("../views/User.vue")
    },
      {
        path: "",
        redirect: "/home/user"  // 重定向 当页面来到home是默认选中的子路由
      }
    ]
  }
]

这样就可以使得当点击登录来到根路径/home时，自动定向到/home/user路由。效果如下：

PixPin_2024-12-30_02-20-37.gif

总结

  1. 路由是指根据不同的URL请求，分配展示不同的 vue 组件的过程。
  2. router 只需要配置 path 与 component 的映射关系
  3. router.push() 可以跳转到指定的路由
  4. router.push({path: '/xxx', query: {xxx: xxx}}) 可以携带参数跳转
  5. useRouter 获取路由的实例对象，它和router 文件夹下的 index.js 中的路由对象是同一个
  6. useRoute 获取当前路由的信息
  7. 二级路由的配置：将某子路由配置在该路由的 children 中，在该路由的组件中通过 渲染出子路由的组件

好啦，关于Vue Router路由管理器就介绍到这里了，希望文章对你能有所帮助，同时可以给文章点点赞支持一下哦。

动物园里有什么.gif

avatar
文章
阅读
粉丝