目录
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组件,添加事件对应的方法
为了方便观察,可以给添加的组件写一行文字
完成