网站开发 安全合同,怎样清理网站后门,网站可以做多少事情,有哪些可以做图的网站啊前言
分析链接#xff1a;Vueelement ui实现好看的个人中心_vue个人信息页面代码-CSDN博客
使用了很多vue深层知识#xff0c;简化并且做到自己的项目上面
对小白很有帮助#xff0c;因为我就是小白#xff0c;才搞明白。 最核心的就是routes的 children使用#xff0c…前言
分析链接Vueelement ui实现好看的个人中心_vue个人信息页面代码-CSDN博客
使用了很多vue深层知识简化并且做到自己的项目上面
对小白很有帮助因为我就是小白才搞明白。 最核心的就是routes的 children使用所以先做一个例子再套用进去。
目录
前言
参考
1.项目结构
2.routes代码
3.IndextwoView代码
4.Page1View代码
5.pageSon代码
6.Page2View代码
routes解析
1.简单常用段
2.重定向设置
3.children的使用
3.1.导入
3.2.children的设置
页面逻辑解析
页面逻辑展示 参考
注因为我是在自己项目做的测试所以其他页面大家不需要也没关系按逻辑去就行。
1.项目结构 2.routes代码
import Vue from vue
import VueRouter from vue-router
Vue.use(VueRouter)
import IndextwoView from /views/IndextwoView.vueconst routes [{path: /IndextwoView,name: IndextwoView,component: IndextwoView,children: [{path: /Page1View,name: Page1View,component: function () {return import( /* webpackChunkName: about */ /views/Page1View.vue)},children: [{path: /pageSon,name: pageSon,component: function () {return import( /* webpackChunkName: about */ /views/PageSon.vue)}}],},{path: /Page2View,name: Page2View,component: function () {return import( /* webpackChunkName: about */ /views/Page2View.vue)}}]},{//测试页面path: /test,name: test,component: () import(../views/tlias/v-forTest.vue),},{//登录页面path: /login,name: login,component: () import(../views/tlias/LoginView.vue),},{// 主页页面path: /index,name: index,component: () import(../views/tlias/IndexView.vue),meta: { token: null } },{// 后端页面path: /stu,name: stu,component: () import(../views/tlias/StuView.vue)},{// 后端页面path: /emp,name: emp,component: () import(../views/tlias/EmpView.vue)},{// 后端页面path: /dept,name: dept,component: () import(../views/tlias/DeptView.vue)},{path: /,redirect: /login}
]
const router new VueRouter({routes
})export default router
3.IndextwoView代码
templatediv classhomeel-menudefault-active2classel-menu-vertical-demoel-submenu index1template slottitlei classel-icon-location/ispan slottitlerouter-link to/Page1View导航一/router-link/span/template/el-submenuel-menu-item index4i classel-icon-setting/ispan slottitlerouter-link to/Page2View导航二/router-link/span/el-menu-item/el-menurouter-view/router-view/div
/template
4.Page1View代码
templatediv classpageonepage1router-link to/pageSon显示/router-linkrouter-view/router-view/div
/template
5.pageSon代码
templatediv classpage1-sonpage1-son/div
/template
6.Page2View代码
templatediv classpage2page2/div
/template routes解析
1.简单常用段
下面的代码为基础路由就带有的功能带了几个页面逻辑很简单易懂所以不解释。
import Vue from vue
import VueRouter from vue-router
Vue.use(VueRouter)const routes [{//测试页面path: /test,name: test,component: () import(../views/tlias/v-forTest.vue),},{//登录页面path: /login,name: login,component: () import(../views/tlias/LoginView.vue),},{// 主页页面path: /index,name: index,component: () import(../views/tlias/IndexView.vue),meta: { token: null } },{// 后端页面path: /stu,name: stu,component: () import(../views/tlias/StuView.vue)},{// 后端页面path: /emp,name: emp,component: () import(../views/tlias/EmpView.vue)},{// 后端页面path: /dept,name: dept,component: () import(../views/tlias/DeptView.vue)},]
const router new VueRouter({routes
})export default router 2.重定向设置
由于路由中默认的为访问/路径所以我们需要使用关键字redirect设置重定向使他访问/路径时访问到/login路径
{path: /,redirect: /login} 3.children的使用
3.1.导入 在使用时需要导入主界面
import IndextwoView from /views/IndextwoView.vue 3.2.children的设置
最上层的为导入的主页面的路径以及设置
后面就可以设置内部的子路由
注子路由中的 component: function () { return import( /* webpackChunkName: about */ /views/Page1View.vue) },为过时写法可以转换成 component: () import(../views/tlias/LoginView.vue), 也是可以使用的没有区别 {path: /IndextwoView,name: IndextwoView,component: IndextwoView,children: [{path: /Page1View,name: Page1View,component: function () {return import( /* webpackChunkName: about */ /views/Page1View.vue)},children: [{path: /pageSon,name: pageSon,component: function () {return import( /* webpackChunkName: about */ /views/PageSon.vue)}}],},{path: /Page2View,name: Page2View,component: function () {return import( /* webpackChunkName: about */ /views/Page2View.vue)}}]}, 页面逻辑解析
在主页面中使用
router-link to/Page2View
进行路由跳转
然后使用 router-view/router-view
进行页面渲染
以便于children的生效 页面逻辑展示
1.首先是我自己的页面登录因为重定向为login 2.进入后点击个人中心接下来到例子内容 3.点击导航一成功显示内容 4.点击显示成功显示page1-son 5.点击导航二成功清除原来组件并显示page2 套用原个人中心代码
更新中...
