VUE前端开发小结(4)

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

这里接上一篇的 VUE 学习小结，继续说一下当时在写公司简单业务时是怎么在一个简单需求的情况下，运用到了路由 Router。

需求

把之前我后端返回的一个 Service--Model--Monitors 关系的一个 map 用菜单的形式展示出来。

思路

前面说过，原来这个模块已经有了一个项目了，是分为一个主页面，在主页面里又嵌入了另一个子页面，所以我一开始的想法是我也在写一个子页面给嵌到主页面就好了。然后偏偏我还把发请求的方法写在了主页面中，这就导致我子页面要去展示数据时，没有数据。我的数据要去主页面中获取。
出现这个现象，我就百度了“页面之间怎么传递参数”，然后就接触到了路由。
当时的做法是：
在主页面中加入下面代码

this.$router.push({
    path: '/article/category',  //这里填的是想要加载的子路由路径
    params: {catid: '10'} //这里填的是想要传递的值
})

然后！！！！
这里一定要注意！！！！
配置当前页面目录下的 routes.js 文件！！！！
而且由于我这里是想达到在另一个页面中拿到主页面中的数据，这个页面还是嵌在主页面中的，这就形成了父子关系，所以在配置 routes.js 时要突出父子关系。形似

routes: [
    { path:"/",redirect:"/user"},
    { path: "/user", component: User },
    { 
        path: "/login", 
        component: Login,
        //通过children属性为/login添加子路由规则
        children:[
            { path: "/login/account", component: account },
            { path: "/login/phone", component: phone },
        ]
    }
]

以上这种配置就是类似配置父子关系的配置，其中 children 中的 path 就是指子路由的路径。
配置好后，在子页面中获取从主页面通过路由传递过来的值就比较简单了，直接使用

this.$route.query.catid

就可以获取存在路由中的 catid 所对应的值，这里注意一定要和你在主页面路由设置中的变量名保持一致。

最终虽然也达到了目的，但这也太麻烦了，需求明明很简单，实现起来也很容易的，偏偏自己想复杂了，下一次再介绍一下后来改过之后的代码。