Vue Router：动态路由与组件切换

画之屏
254 阅读6分钟

前言

张三是一位Vue初学者，它只通过画之屏的文章学到了Vue的初步指令 开启前端设计新时代——Vue小白入门指令使用

他现在想写一个像这样一个demo的导航栏

image.png

却只能通过赋值来实现

<template>
 <nav>
  <span @click="changeTab(1)">基础知识</span> |
  <span @click="changeTab(2)">购物车</span> |
  <span @click="changeTab(3)">待办事项</span>
 </nav>

 <Base v-if="state.index===1"/>
 <shopping v-if="state.index===2"/>
 <todo v-if="state.index===3"/>

</template>

<script setup>
import Base from './components/base.vue'
import shopping from './components/shopping.vue'
import todo from './components/todo.vue'
import { reactive } from 'vue'

let state =reactive({
  index:1
})
const changeTab= (i) => {
   state.index = i
}
</script>

张三感到不解，难道vue没有实现页面切换的方法吗，万一页面数过多，数不过来了怎么办？

正文

实际上，张三所想实现的事情正是Vue中的动态路由与界面切换

Vue Router 介绍

Vue Router是Vue.js官方提供的路由管理器，它深度集成并优化了Vue.js的核心功能，专门为构建单页应用（SPA）设计。单页应用是指在用户与应用交互过程中，无需重新加载整个网页即可动态更新部分内容的应用。Vue Router允许开发者根据不同的URL路径加载和切换不同的组件，从而实现流畅的用户体验和高效的页面管理。

主要特点

  • 组件化的路由配置：Vue Router允许你将路由和组件一一对应，每个路由都可以映射到一个或多个组件，这种组件化的思想贯穿于整个Vue生态。
  • 嵌套路由：支持嵌套的路由配置，可以轻松地构建复杂的多级路由结构，适合构建大型应用。
  • 动态路由匹配：可以使用参数化路由，动态地从URL中捕获信息，如/user/:id这样的路由，其中:id是一个动态段，可以根据实际URL动态变化。
  • 命名视图和命名路由：可以定义多个视图和路由名称，方便在复杂布局中管理多个嵌套组件。
  • 导航守卫：提供了多种守卫机制，如全局前置守卫、全局解析守卫、路由独享守卫等，用于控制导航逻辑，例如权限验证、数据预加载等。
  • 过渡效果：Vue Router可以配合Vue的过渡系统使用，为路由切换添加动画效果，增强用户体验。

如果你不想看上面的文字，那就跟着我开干！

构建项目

我们先使用命令构建一个vue项目

npm create vue@latest

接着我们全部选否

创建一个很简单的页面，写一个导航栏就行

<template>
 <nav>
  <div>首页</div>|
  <div>BOT</div>|
  <div>沸点</div>
 </nav>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

image.png

它本是平平无奇的花瓶，接着我们给他注入神秘力量

我们先在终端输入

npm i vue-router@4

安装vue路由包

接着我们在src目录下创建一个名为router的文件夹，并在里面新增文件index.js

这个文件就是我们给这个项目定义的路由规则，每个路由规则关联一个特定的路径和一个组件，当用户访问该路径时，对应的组件将会被渲染并展示给用户。

我们在vue文件中使用router-link进行导航

router-link组件是Vue Router提供的用于创建链接的便捷方式，它自动处理了URL的更新和页面的平滑过渡。

接着我们就可以在主应用组件中引入router-view组件，它会根据当前的URL动态地显示与之匹配的组件。

<template>
 <nav>
  <router-link to="/home">首页</router-link>|
  <router-link to="/bot">BOT</router-link>|
  <router-link to="/bot">沸点</router-link>
 
 </nav>

 <!-- 路由入口 -->
  <router-view></router-view>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

我们创建一个文件夹views,再在里面创建这三个文件

image.png

然后我们在index.js给我们的路由设置规则：

import { createRouter,createWebHashHistory } from "vue-router";
import Home from '../views/Home.vue'

const routes = [
    {
        path: '/home',
        component: Home

    },
    {
        path:'/bot',
        component: () => import('../views/Bot.vue')

    },
    {
        path:'/hot',
        component: () => import('../views/Hot.vue'),
        props:true
    }
]

const router =  createRouter({
    history: createWebHashHistory(),
    routes
})
export default router

这里导入了Vue Router的两个核心函数：createRouter和createWebHashHistory，以及Home组件。createRouter用于创建一个路由器实例，而createWebHashHistory用于创建一个基于浏览器hash值的路由历史记录模式。

routes数组定义了应用的所有路由规则。每个路由规则都是一个对象，包含至少path和component两个属性：

  • path指定了URL路径，例如'/home'。
  • component指定了与该路径相关的组件。在这里，Home组件是直接导入的，而Bot和Hot组件使用了异步组件加载，即component: () => import('../views/Bot.vue')。这种方式可以按需加载组件，提高应用性能。

对于Hot路由，额外设置了props: true。这意味着组件接收的props将直接从URL的查询参数和片段标识符中提取，无需在组件内手动处理。

最后，将之前定义的路由规则和历史模式传给了createRouter函数。history选项指定了使用基于hash的路由历史模式，这是最常见的单页面应用（SPA）模式之一，因为它不需要服务器端的支持。

router-link通过to属性来指定链接的目标路由，这里的to属性接受一个字符串，该字符串会被解析为路由的路径。当用户点击这些链接时，页面不会重新加载，而是触发内部的路由跳转。

也就是说，当我们点击这些这三个标签时，页面会自动通过url跳转到该标签所属的一个页面

最后我们在main.js中引入该路由规则并调用

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'

const app = createApp(App);

app.use(router); // 使用路由器

app.mount('#app'); // 挂载应用

image.png

我们就能通过点击导航栏跳转至该组件了

但是如果我们需要在组件内切换组件呢？

我们就需要先设置点击事件

例如，我们想要在Home页面中创建一个按钮能够跳转至沸点栏

我们先在<template>中写出按钮

<template>
    <div>
        <h2>home page</h2>
        <button @click="goHot">去沸点</button>

    </div>
</template>

接着我们需要使用JS语法，先引入一个路由类

import { useRouter } from 'vue-router'

再拿到useRouter中的一个实例对象

并在函数中使用push方法调用它

const goHot = () => {
    router.push({
        path:'/hot',
        query:{
            id:1,
            name:'张三'
        }
    })
};

若你只是想跳转页面，就直接输入router.push('/hot');跳转至沸点页面

若你想要一并传入参数，就便如上述代码一样将想要传入的参数写入query对象中

总结

张三看完画之屏的文章后，恍然大悟

于是他准备使用Vue Router构建他的单页应用，享受其带来的便利和高效。

并给画之屏的文章留下了一个赞和收藏

求点赞评论收藏，有问题随时私信博主！

avatar
文章
阅读
粉丝