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

前言

正文

给路由添加组件

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

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后面的变量名，变量名可以自己定义，但需要注意在使用时确保变量名使用正确。

路由的重定向

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

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

 {
        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标签，只不过通过封装使其变得更加简单好用罢了

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

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

总结

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