Vue3.0商店后台管理系统项目实战-路由
2023-06-13 09:14:11 时间
1:router-link和router-view的区别
在App.vue里面
router-link相当于是a标签 ,to="路由path"
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
router-view:展示路由对应的组件内容
在views底下新建一个组件LayOut
<template>
<div>
<p>导航</p>
</div>
</template>
<script>
export default {
name:"layout",
setup() {
},
}
</script>
并且打开router/index.js配置路由
在浏览器里面查看
router-view:展示路由对应的组件内容
2:嵌套路由/子路由
createWebHasHistory:哈希路由 访问路径 有#
createWebHistory:history模式路由 访问路径 无#
在views底下新建一个角色列表页和用户列表页
roleList.vue
<template>
<div>
<h1>角色列表</h1>
</div>
</template>
<script>
export default {
name:"role",
setup() {
},
}
</script>
userList.vue
<template>
<div>
<h1>用户列表</h1>
</div>
</template>
<script>
export default {
name:"user",
setup() {
},
}
</script>
在router/index.js里面,添加路由
//嵌套路由/子路由
children:[
{
path:"/index",
name:"role",
component:()=>import('../views/pages/roleList.vue'),
},{
path:"/user",
name:"user",
component:()=>import('../views/pages/userList.vue'),
}
]
index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'layOut',
redirect: "/index",//重定向 进来就自动默认到index路径
component: () => import('../views/LayOut/LayOut.vue'),
//嵌套路由/子路由
children: [
{
path: "/role",
name: "role",
component: () => import('../views/pages/roleList.vue'),
}, {
path: "/user",
name: "user",
component: () => import('../views/pages/userList.vue'),
}
]
},
{
path: '/home',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
侧边栏导航 vue3搭配Element Plus框架使用 Element Plus基于 Vue 3,面向设计师和开发者的组件库 文档:https://element-plus.gitee.io/zh-CN/
安装
# NPM
$ npm install element-plus --save
图片.png
安装完成之后开始引入 打开main.js的文件 这里接口文档上是有说明的 ,直接根据文档上的教程来写
图片.png
main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')
开始使用组件里面的布局 后台管理的布局 直接复制代码即可
<div class="common-layout">
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</div>
LayOut.vue
<template>
<div>
<div class="common-layout">
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">
<router-link to="/index">角色列表</router-link>
<router-link to="/user">用户列表</router-link></el-aside
>
<el-main><router-view></router-view></el-main>
</el-container>
</el-container>
</div>
</div>
</template>
<script>
export default {
name: "layout",
setup() {},
};
</script>
相关文章
- JAVA大数据后台管理系统
- Typecho如何去修改默认的后台地址
- 面经刺客 | 金腾科技中后台产品 暑期实习面经
- 微信公众号网页开发-js模拟后台生成signature方法
- 黑掉ATM的机会:编写恶意程序黑掉后台系统
- 第23篇:XSS绕过防护盲打某SRC官网后台
- 微信小程序 从后台接口接收数据并把数据传给要跳转的页面–小程序中页面传值数据不完整(mpvue)
- 前端后端,前台后台名词解释!
- 如何处理Xcode上传IPA文件后无法在后台架构版本中显示的问题?
- jqueryform表单提交插件asp.net后台中文解码
- 使用innerHTML时注意处理空格和回车符(asp后台处理)
- android教程之使用asynctask在后台运行耗时任务
- c#后台线程访问前台控件并显示信息示例