Vue-router子路由嵌套路由创建
实验目的
在我们的商城项目中,后台管理页 Admin
涉及到很多操作页面,比如:
/admin
主页面/admin/create
创建新信息/admin/edit
编辑信息
让我们通过嵌套路由的方式将它们组织在一起。
创建Admin页面
在src/views下创建 Admin.vue,并创建admin目录,以用来存放admin的子页面( 使用vue-router的子路由,需要在父组件利用 router-view
占位 )
-
Admin.vue
<template>
<div class="title">
<h1>{{ msg }}</h1>
<!-- 路由插槽 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "home",
data() {
return {
msg: "This is the Admin Page",
};
},
};
</script>
<style scoped>
</style>
创建子页面
在src/views下创建admin目录用来存放admin的子页面,在admin目录下新建Create.vue 和 Edit.vue 来实现/create
创建新的商品/edit
编辑商品信息
-
Create.vue
<template>
<div>
<div class="title">
<h1>This is Admin/Create</h1>
</div>
</div>
</template>
-
Edit.vue
<template>
<div>
<div class="title">
<h1>This is Admin/Edit</h1>
</div>
</div>
</template>
修改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
提供了嵌套路由的功能,让我们能把相关联的页面组织在一起。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfhkef
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24