VUE路由初体验，为初学者解析路由基础知识（二）

前言

在上一篇文章中我已经详细讲述了该如何安装并且配置一个vue路由，对于初学者而言在经过简单的练习之后应该可以独立完成这些工作，在这篇文章中我将继续详解讲述如何进一步配置路由使它能够完成更加复杂一些的任务，例如重定向，子父组件传参等。 VUE路由初体验，为初学者解析路由基础知识（一）

正文

给路由添加组件

我们可以将路由想象成一个大口袋，当用户需要什么页面，路由就会根据对应的路径把包裹掏出来并展示给用户。那么我们在配置好路由这个大口袋之后，就需要把包裹一个个塞进去。依旧是通过import的方法

js 复制代码

import {createWebHistory ,createRouter} from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Newest from '../views/homeChild/newest.vue'

这里有必要解释一下第一行代码，这行代码使用了 ES6 的解构赋值语法，从 vue-router 模块中导入了 createWebHistory 和 createRouter 函数。createWebHistory 函数用于创建一个基于 HTML5 History API 的路由模式，可以在浏览器的地址栏中显示真实的 URL。而 createRouter 函数则是用于创建路由实例的工厂函数，它接受一个路由配置对象作为参数，返回一个可用于创建 Vue 实例的路由实例。因为在 Vue 3 中，路由模块是独立的模块，需要单独安装和导入。因此，我们需要使用 import 关键字将需要的函数从 vue-router 中导入，以便在我们的代码中使用。如果是初学者想要完全理解或许会感到有些困难，不必在意，毕竟也不是每个程序员都能完全理解自己的代码。剩余的就是将自己已经写好的vue实例引入并赋值给import后面的变量名，变量名可以自己定义，但需要注意在使用时确保变量名使用正确。

路由的重定向

举个最简单的例子当我们在PC端进入掘金官网时，掘金会自动进入到首页下的综合目录，而不需要我人为的点击，这里就涉及到一个vue的路由重定向的问题。解决方法十分简单，在router文件夹下的index文件中我们已经写好了一个routes的数组，我们只需要在数组中添加一个数组元素如下：

js 复制代码

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

这就意味着当路径是首页时，会自动重定向到首页目录下的homepage页面并展示对应的组件，同样的，如果是需要在homepage下依旧需要重定向，那么我们就需要在index文件中homepage所对应的对象中进行修改

js 复制代码

 {
        path:'/homepage',
        component:Home,

        children:[
            {
                path:'/homepage',//当路径为homepage时
                redirect:'/homepage/newest'//重定向到/homepage/newest
            },
            {
                path:'newest',//二级路由不加斜杠
                component:Newest
            },

            {
                path:'recommend',
                component:() => import('../views/homeChild/recommend.vue')//另一种引入方式
            },
        ]

    },

不过需要注意是，在homepage页面再次进行重定向时，重定向的页面属于子页面，需要在homepage的对象中再定义一个名为children的数组，并在数组中声明重定向的路径与组件，同时，作为二级组件，引用地址不需要加'/'

router-link标签

实现页面跳转这块每次都让用户自己手敲地址的话，那网站离倒闭也就不远了，在多页开发时我们经常会使用到a标签去做一个页面的跳转，但在vue中以及封装好了更加好用的标签---router-link。看着好像挺复杂挺高大上的玩意，其本质还是一个a标签，只不过通过封装使其变得更加简单好用罢了

js 复制代码

 <router-link to="/homepage">home</router-link>|
 <router-link to="/aboutpage">about</router-link>

后面接的to就是指定跳转的地址，例如以下标签就会分别跳转到该路径下的home页面和about页面

总结

文章内容非常简单，对于初学者而言理解起来应该也不会有太大问题。vue路由可以说是vue的关键之一，也是vue框架实现组件化开发必不可少的一个元素，最近两篇文章可以做个小的demo练练手，在之后的文章中我会继续介绍组件之间的传参以及原理等内容，希望可以帮助到大家。