Vue-初试水(四)

1、导航栏路由使用
router属性必须要加上,才能使用vue本身的路由
Vue-初试水(四)_第1张图片

Vue-初试水(四)_第2张图片

如果要使用data中传入的值,则在el-menu-item中index属性的使用就变成:index的写法,如果直接使用index,则是无法使用data中的值

如果不用data中的值而直接固定写的话,就是属性写法,直接把:干掉,index自带属性来写:
Vue-初试水(四)_第3张图片

2、在Vue中进行分层布局
1、首先先把局布准备工作布置好,先有个型
Vue-初试水(四)_第4张图片

2、之后引入要布置的局面的页面,在对应的位置进行摆放:
Vue-初试水(四)_第5张图片

Vue-初试水(四)_第6张图片

3、这个标签很关键,就是你在本页面引用的路由到底怎么显示,通过这个可以让其显示在main区域

子页面的main
Vue-初试水(四)_第7张图片

这里不得不说明,对于二级路由的配置,如果要显示在firstpage的main里面,则对于其下的所有路由都要配置到其子(children)里面:
Vue-初试水(四)_第8张图片

也就是APP.vue中搞得是route-view是一级路由,如果没有在谁的children里面则直接显示在这:
Vue-初试水(四)_第9张图片

所以在main里面配置的route-view要显示内容,则要在路由表中将其画在本页面的子里面,则跳转显示后,就会到子路由中。

你可能感兴趣的:(Vue-初试水(四))