Vue-router模拟掘金导航栏（小白使用教程）

zykk
1,267 阅读4分钟

效果

todos.gif 这个例子中主要介绍以下几个知识点：

  1. 路由配置
  2. 设置二级路由
  3. 如何跳转
  4. 参数问题

路由

昨天提到，vue是单页面开发，我们可以开发一个个组件，每一个xxx.vue都是一个组件，这些组件最终会被vue读取，并编译成一段div结构，挂载在唯一的html文件中，所以，想要实现组件之间的切换很简单。组件化开发介绍：给小白介绍vue组件化开发 - 掘金 (juejin.cn)

每个页面都有唯一的url，想要将某些组件当成页面，我们就需要将代码片段(组件)的切换模拟成页面跳转的样子（vue-router）（因为vue是单页面开发 localhost:3000/home）模拟页面跳转获取路由，将home更改，localhost:3000/page

image.png vue-router官方介绍：介绍 | Vue Router (vuejs.org)

路由实现

创建Vue项目，注意不要直接使用vue router

image.png

npm create vue@latest

安装路由包 npm install vue-router@4

npm install vue-router@4

创建路由文件夹router，创建index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../pages/Home.vue'
import Bot from '../pages/Bot.vue'
import Hot from '@/pages/Hot.vue'
const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home,
        children: [
            {
                path: '/home',
                redirect: '/home/suggest'
            },
            {
                path: '/home/newest',
                component: () => import('../pages/home/Newest.vue')
            },
            {
                path: '/home/suggest',
                component: () => import('../pages/home/Suggest.vue')
            }
        ]
    },
    {
        path: '/hot',
        component: Hot
    },
    {
        path: '/bot',
        component: () => import('../pages/Bot.vue')
    }
]

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

export default router
  • 定义const routes = [] ,最终抛出这个路由（export default router），抛出之后就可以作为变量引入到我们的全局中。在routes中写路由。目前没有使用vue route工具，以后使用了这些文件都是自动生成的，我们只需要向里面添加路径就行。
  • 在路由配置的组件定义中有两种引入方式，一种直接在后面写 component: () => import('../pages/home/Suggest.vue')指向哪个vue文件，这个vue文件其实就是我们的页面代码，通过将这份页面代码挂载到index.html中实现页面的显示。另一种方式就是头部引入import Home from '../pages/Home.vue'，component: Home
const router = createRouter({
    history: createWebHistory(),
    routes: routes
}
  • createRouter：这是 Vue Router 提供的用于创建路由对象的函数。
  • createWebHistory：指定了路由的历史模式为基于浏览器历史记录的模式。
  • routes：刚刚写的路径引入进来。
  • 写好了路由，需要有一个路由入口，在App.vue中加入页面的路由入口
<template>
  <div>
    <nav>
      <router-link to="/home">首页</router-link> |
      <router-link to="/bot">Bot</router-link>  |
      <router-link to="/hot">沸点</router-link> |
    </nav>

    <!-- 页面 -->
     <router-view></router-view>

  </div>
</template>
  • 路由创建赋值给router，最后在全局引入router便可以使用了
import router from './router/index.js' // index.js可以省略 默认文件
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(router).mount('#app')

实现导航栏

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

    <!-- 页面 -->
     <router-view></router-view>

  </div>
</template>
  • <router-link> 是用于实现路由导航的组件。to 属性用于指定要导航到的目标路由路径。通过设置 <router-link to="具体路由路径"> ，当用户点击该链接时，会触发路由切换，将页面导航到指定的路由对应的组件或页面。
  • 用于显示当前路由匹配到的组件内容的区域。当路由发生变化时，与当前路由对应的组件会动态地渲染在 <router-view> 这个位置，从而实现不同页面或组件的切换展示。

二级路由

在首页中还有最新页面和推荐页面，这两个页面都是首页home的子页面，因此我们在Home.vue这个页面加入路由链接router-link

    <router-link to="/home/newest">最新</router-link>
    <router-link to="/home/suggest">推荐</router-link>

但是光添加跳转没有用，还需要添加路由。并且这个路由是二级路由（children）

    {
        path: '/home',
        component: Home,
        children: [
            {
                path: '/home',
                redirect: '/home/suggest'
            },
            {
                path: '/home/newest',
                component: () => import('../pages/home/Newest.vue')
            },
            {
                path: '/home/suggest',
                component: () => import('../pages/home/Suggest.vue')
            }
        ]
    },

注意：由于页面刚进来就需要直接显示home页面以及home下的一个默认子页面，因此要加入重定向redirect

页面跳转和参数问题

我们想要在bot页面中有一个按钮能够跳转去hot页面，并且在跳转过去之后url中带一个参数：id=1

  • 首先绑定点击事件
    <button @click="toHot">去沸点</button>

在toHot点击函数中使用vue-router库中的useRouter函数创建路由实例，并通过push方法做跳转

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

// hook函数 钩子函数 高阶函数
const router = useRouter()
const toHot = () => {
    // 跳转到沸点页面
    router.push({path:'/hot',query:{id:1}})
    // router.push({path:'/hot',params:123})  废除
}
</script>
  • query 用于在路由跳转时传递查询参数。这些参数会附加在 URL 的问号后面，并以键值对的形式存在。

小结

本文全面且详细地阐述了路由的相关内容，涵盖了路由的配置方式、实现路由跳转的具体操作，以及在跳转过程中携带参数的方法，还包括了如何设置二级路由和处理重定向等问题。小白朋友们通过对本文的认真学习，必然能够熟练掌握从无到有构建一个完整系统过程中涉及到的各种页面跳转操作及相关要点。如此一来，大家便可以轻松应对在构建系统时所面临的各种页面跳转需求，从而为构建出功能完备且体验良好的系统奠定坚实的基础。

avatar
文章
阅读
粉丝