Vue项目-侧边栏及路由配置解析

目录

App.vue

标签

一级路由

二级路由

二级路由的切换

添加侧边栏项并配置路由

---

App.vue

这是Vue项目的根组件

<router-view>标签

 <router-view>标签用来控制组件展示的位置，这里是第一次使用该标签，所以配置的是一级路由，用于展示单个独立页面。在该项目中，有两个单个的独立页面：登录界面和用户界面。

一级路由

所以在路由配置文件中，给这两个组件配置的是一级路由

path:'/login',component:login，这行代码的意思是：给组件login设置一个路由地址，用于之后的路由跳转。看到这里，我相信你还有很多疑问，我来一个个解答

1.login组件是什么，从哪来的，怎么配的？

login来源于导入时起的名字，也可以起其他名字，只要对应起来就行，而login也是在导入的时候定位对应的组件文件。如图：

2.设置路由地址有什么用，怎么用？

设置路由地址是为了后续根据这个路由地址来展示对应的组件。比如：

这里的意思就是我满足条件后，可以在指定位置（<router-view>标签的位置）展示路由地址为/user/talent的组件内容。

二级路由

二级路由的作用：通过点击导航栏的不同选项，页面的部分位置切换不同的组件。在该项目中，就是在user界面中的指定位置可以根据侧边栏的选项，切换不同的组件内容

切换的组件在user界面中的代码位置

也就是说，切换的组件都会放在这个位置。

二级路由的切换

如何通过点击不同选项实现路由跳转，从而达到切换组件的效果。以属性选项为例

在该项中，设置了一个点击事件@click="attribute"，我们定位到该事件的位置：

设置if条件，是保证已经在该路由下时避免再进行跳转，否则会报错。满足条件后，就会执行this.$router.push('/user/attribute');，效果就是在<view-router>标签处切换为与/user/attributer对应的组件。

这里应该又会有疑问：为什么attributer组件对应的path是attribute，这路径好像不完整。这是因为该组件是在user界面里展示的，所以对应的路由就是user的子路由，这就是为什么前面会有一个children:。。。。,对于子路由，它的路由路径规则是:在父路由路径的基础上拼接，比如这里父路由的路径是/user，而子路由的path是attribute，拼接后就是/user/attribute。

了解了这些后，就可以开始自己添加侧边栏项并配置路由了

添加侧边栏项并配置路由

首先在components文件夹下，创建组件文件。注意，这里的name属性要设置成多单词的，否则前端会报错。

然后在user界面的对应位置添加侧边栏项，并配置点击事件。注意，index要按照顺序，比如前面个人页面index是5，所以当前配置的index就应该是6了

在路由配置文件中配置该组件的路由

回到user组件，添加事件对应的方法

为了方便观察，可以给添加的组件写一行文字

完成