vue中的for循环路由二级路由

vue中的for循环路由二级路由

1.第一步先写需要使用的仓库,里面是需要循环的数据name的设置,class的名称,以及要跳转的路径名称

vue中的for循环路由二级路由_第1张图片
2.第二部分的样式,在正文中进行循环输出。这里需要使用rout-link来编辑vue的内置方法
主要看图片的内容这里不做多余的解释!记住v-for要写在外面不要写在同一行!!!!!
vue中的for循环路由二级路由_第2张图片

第三部分的代码,这里是路由的配置文件,在这里我忘记了name的作用先不写,path是需要对应的循环,component是告诉需要使用的单页面文件

vue中的for循环路由二级路由_第3张图片

4.最重要的一部分
这一部分是二级路由需要用到的最重要的!切记。要用一个div包裹起来一个页面中只能出现一次

**<router-view></router-view>**

到这里基本结束了!刚开始写博客代码有所不周全请大家见谅,后续会更加完善!

你可能感兴趣的:(vue项目技术,vue中for循环二级路由)