Vue-router子路由怎么创建
本篇内容主要讲解“Vue-router子路由怎么创建”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue-router子路由怎么创建”吧!
创新互联公司于2013年创立,先为兰山等服务建站,兰山等地企业,进行企业商务咨询服务。为兰山企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
实验目的
在我们的商城项目中,后台管理页 Admin
涉及到很多操作页面,比如:
/admin
主页面/admin/create
创建新信息/admin/edit
编辑信息
让我们通过嵌套路由的方式将它们组织在一起。
创建Admin页面
在src/views下创建 Admin.vue,并创建admin目录,以用来存放admin的子页面( 使用vue-router的子路由,需要在父组件利用 router-view
占位 )
Admin.vue
{{ msg }}
创建子页面
在src/views下创建admin目录用来存放admin的子页面,在admin目录下新建Create.vue 和 Edit.vue 来实现/create
创建新的商品/edit
编辑商品信息
Create.vue
This is Admin/Create
Edit.vue
This is Admin/Edit
修改router/index.js代码
增加子路由,子路由的写法是在原有的路由配置下加入children字段。
children:[ {path:'/',component:xxx}, {path:'xx',component:xxx}]
注意:children里面的path 不要加 / ,加了就表示是根目录下的路由。
index.js
import Vue from 'vue'import VueRouter from 'vue-router'import Admin from '@/views/Admin.vue'// 导入admin子路由import Create from '@/views/admin/Create';import Edit from '@/views/admin/Edit';Vue.use(VueRouter)const routes = [ { path: '/admin', name: 'Admin', component: Admin, children: [ { path: 'create', component: Create, }, { path: 'edit', component: Edit, } ] }]const router = new VueRouter({ routes})export default router
Vue-router 子路由(嵌套路由)创建完成在应用界面开发中通常由多层嵌套的组件组合而成。但随着页面的增多,如果把所有的页面都塞到一个 routes
数组里面会显得很乱,你无法确定哪些页面存在关系。借助 vue-router
提供了嵌套路由的功能,让我们能把相关联的页面组织在一起。
到此,相信大家对“Vue-router子路由怎么创建”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
网站标题:Vue-router子路由怎么创建
链接分享:http://scyanting.com/article/igpsee.html