基于vue-router的小练习——后台管理系统

最新推荐文章于 2022-12-18 21:25:42 发布
最新推荐文章于 2022-12-18 21:25:42 发布
阅读量534 收藏 7
点赞数 3
分类专栏： vue demo 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jack_lzx/article/details/110880591
版权
vue 同时被 2 个专栏收录
11 篇文章 0 订阅
订阅专栏
demo
10 篇文章 0 订阅
订阅专栏

1. 练习到的技术点

  • 路由的基础用法
  • 嵌套路由
  • 路由重定向
  • 路由传参
  • 编程式导航

2. 实现效果

效果展示

3. 实现代码

<!DOCTYPE html>
<html lang="Zh">

<head>
    <meta charset="UTF-8" />
    <title>基于vue-router的案例</title>
    <style>
        html,
        body,
        #app {
            margin: 0;
            padding: 0px;
            height: 100%;
        }
        
        .header {
            height: 50px;
            background-color: #545c64;
            line-height: 50px;
            text-align: center;
            font-size: 24px;
            color: #fff;
        }
        
        .footer {
            height: 40px;
            line-height: 40px;
            background-color: #888;
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
            color: #fff;
        }
        
        .main {
            display: flex;
            position: absolute;
            top: 50px;
            bottom: 40px;
            width: 100%;
        }
        
        .content {
            flex: 1;
            text-align: center;
            height: 100%;
        }
        
        .left {
            flex: 0 0 20%;
            background-color: #545c64;
        }
        
        .left a {
            color: white;
            text-decoration: none;
        }
        
        .right {
            margin: 5px;
        }
        
        .btns {
            width: 100%;
            height: 35px;
            line-height: 35px;
            background-color: #f5f5f5;
            text-align: left;
            padding-left: 10px;
            box-sizing: border-box;
        }
        
        button {
            height: 30px;
            background-color: #ecf5ff;
            border: 1px solid lightskyblue;
            font-size: 12px;
            padding: 0 20px;
        }
        
        .main-content {
            margin-top: 10px;
        }
        
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        ul li {
            height: 45px;
            line-height: 45px;
            background-color: #a0a0a0;
            color: #fff;
            cursor: pointer;
            border-bottom: 1px solid #fff;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        td,
        th {
            border: 1px solid #eee;
            line-height: 35px;
            font-size: 12px;
        }
        
        th {
            background-color: #ddd;
        }
    </style>
    <script src="https://jack-img.oss-cn-hangzhou.aliyuncs.com/js/vue.js"></script>
    <script src="https://jack-img.oss-cn-hangzhou.aliyuncs.com/js/vue-router_3.0.2.js"></script>
</head>

<body>
    <div id="app">
        <router-view></router-view>
    </div>


    <script>
        // 定义app根组件
        const App = {
            template: `
                  <div>
                  <!-- 头部区域 -->
                  <header class="header">后台管理系统</header>
                  <!-- 中间主体区域 -->
                  <div class="main">
                      <!-- 左侧菜单栏 -->
                      <div class="content left">
                          <ul>
                              <li><router-link to="/users">用户管理</router-link></li>
                              <li><router-link to="/rights">权限管理</router-link></li>
                              <li><router-link to="/goods">商品管理</router-link></li>
                              <li><router-link to="/orders">订单管理</router-link></li>
                              <li><router-link to="/settings">系统设置</router-link></li>
                          </ul>
                      </div>
                      <!-- 右侧内容区域 -->
                      <div class="content right">
                          <div class="main-content">
                            <router-view></router-view>
                          </div>
                      </div>
                  </div>
                  <!-- 尾部区域 -->
                  <footer class="footer">版权信息</footer>
              </div>
        `
        }

        const Users = {
            data() {
                return {
                    userlist: [{
                        id: 1,
                        name: 'zhangsan',
                        age: 10
                    }, {
                        id: 2,
                        name: 'lisi',
                        age: 11
                    }, {
                        id: 3,
                        name: 'wangwu',
                        age: 12
                    }, {
                        id: 4,
                        name: 'zhangsan',
                        age: 13
                    }, {
                        id: 5,
                        name: 'xiaoming',
                        age: 14
                    }]
                }
            },
            methods: {
                goDetail(id) {
                    // console.log(id);
                    this.$router.push('/userinfo/' + id)
                }
            },
            template: `
              <div>
                <h3>用户管理区域</h3>
                  <table>
                    <thead>
                      <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="item in userlist" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.age}}</td>
                        <td><a href="javascript:;" @click='goDetail(item.id)'>详情</a></td>
                      </tr>
                    </tbody>
                  </table>
              </div>
          `
        };

        const UserInfo = {
            props: ['id'],
            template: `
            <div>
              <h2>用户详情页---用户ID为:{{id}}</h2>
              <button  @click="goBack()">后退</button>
            </div>
            
          `,
            methods: {
                goBack() {
                    this.$router.go(-1);
                }
            }
        }

        const Rights = {
            template: `
              <div><h3>权限管理区域</h3></div>
          `
        };
        const Goods = {
            template: `
              <div><h3>商品管理区域</h3></div>
          `
        };
        const Orders = {
            template: `
              <div><h3>订单管理区域</h3></div>
          `
        };
        const Settings = {
            template: `
              <div><h3>系统设置区域</h3></div>
          `
        };

        // 创建路由对象
        const router = new VueRouter({
            routes: [{
                path: '/',
                component: App,
                redirect: '/users',
                children: [{
                    path: '/users',
                    component: Users
                }, {
                    path: '/userinfo/:id',
                    component: UserInfo,
                    props: true
                }, {
                    path: '/rights',
                    component: Rights
                }, {
                    path: '/goods',
                    component: Goods
                }, {
                    path: '/orders',
                    component: Orders
                }, {
                    path: '/settings',
                    component: Settings
                }]
            }]
        });

        const vm = new Vue({
            el: '#app',
            router
        });
    </script>
</body>

</html>
火星飞鸟
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue-router 的使用与基础篇解析
黑山老妖的小站
07-23 1587
开篇 源码仓库为：https://gitee.com/wx_142da4773a/vue-router-demo.git 基础篇 起步 可以自己创建项目也可以从我的gitee上拉取代码进行练习~ 我采用了vue create 来创建项目并选择了router特性。选择过程会询问以下问题 vue create vue-router-demo 创建一个vue项目 请选择预置Please pick a preset: (Use arrow keys) default (babel, eslint) Manua
vue-router实战练习
caoxinjian423的博客
10-07 320
效果截图： 代码目录： github链接：https://github.com/caoxinjian423/practice-vue-router
vue路由小demo练习
gxgalaxy
03-28 1054
路由知识详解地址 接着前面的demo地址继续练习路由知识. 主要完成首页和电影无刷新跳转切换以及动态路由.实际就是组件之间的切换 先上效果图 首页:(简单表示一下) 电影页: 假设有一个电影详情页，详情页需要根据电影的id来获取电影对象，然后渲染组件 那么电影详情页的地址中就需要包含电影的id 这里就涉及到三个问题： 如何把动态地址（地址某一部分会变化）匹配到组件 如何在组件中获取到动态部分的...
【Vue 小练习 】Router路由及嵌套使用
m0_51252051的博客
04-08 209
【Vue学习记录 3】 5.2 路由嵌套 这里写目录标题目录main.jsrouter默认页App.vuecomponent-Home第一层component-Alibabacomponent-Tencent第二层component-QQcomponent-Wechat 目录 main.js import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = fals
vue-Router 常见面试题
克隆代码
07-29 2303
vue-Router 常见面试题
基于vue-element-admin的后台管理系统
12-25
这是一个基于vue-element-admin的城市高空安全及玻璃幕墙检测的后台管理系统
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统
最新发布
06-14
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统 项目经过严格测试，确保可以运行！ 基于 Spring Boot 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、...
基于 vue + element-ui 的后台管理系统
05-20
在“基于 vue + element-ui 的后台管理系统”项目中，我们可以看到以下几个重要的知识点： 1. **Vue.js 框架**：Vue.js 提供了模板语法、虚拟DOM、响应式数据绑定、组件化等特性，使得开发人员能够构建出复杂的单...
基于vue-router 多级路由redirect 重定向的问题
10-18
今天小编就为大家分享一篇基于vue-router 多级路由redirect 重定向的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue知乎项目vue练习
06-06
适合初步学习vue的技术里面有代码包括路由ajax还有vuex
ssm项目整合的后台管理系统的小练习
12-06
ssm项目整合的后台管理系统的小练习,java语言编程，oracle数据库，整合mabits,springmvc框架
一个练习用的vue网站
08-10
技术 vue2.0 vuex sass es6 vue-router2.0
官方的js路由router
weixin_40945354的博客
02-09 1058
// 1. 定义路由组件. // 也可以从其他文件导入 const Home = { template: '<div>Home</div>' } const About = { template: '<div>About</div>' } // 2. 定义一些路由 // 每个路由都需要映射到一个组件。 // 我们后面再讨论嵌套路由。 const routes = [ { path: '/', component: HelloWorld }, { pa
Vue学习第31天——编程式路由导航5种方法详解及案例练习（与声明式路由导航对比）
背心的博客
09-24 2249
编程式路由导航5种方法详解及案例练习（与生命式路由导航对比）
Vue学习第27天——路由vue-router的详解及案例练习
背心的博客
09-21 2433
路由vue-router的详解及案例练习
Vue路由课后习题
qq_35738273的博客
06-02 4449
通过Vue路由实现Tab栏切换案例，要求为：创建3个子路由，分别是“待付款”、“待发货”、“待收货”，在每个子路由页面单独写出xiang gu
Vue实现后台管理系统
ztK63LrD的博客
12-18 6115
Vue路由这篇文章详细介绍了路由的知识；Vue导航这篇文章详细介绍了路由导航的知识。
Vue-router 的练习
nqxcwl的专栏
11-02 201
使用了vue-cli 生成了一套webpack的模版。 之后在其中练习 vue-router。 以下是一些记录。 1.动态路由的配置 import Vue from 'vue' import Ro...
vue-router应用——用户登录注册案例
05-24
好的，下面我来为您介绍一下如何使用vue-router实现用户登录注册功能。 首先，我们需要安装vue-router，可以通过以下命令进行安装： ``` npm install vue-router --save ``` 然后，在main.js中引入并使用vue-router： ``` import VueRouter from 'vue-router' Vue.use(VueRouter) ``` 接下来，我们新建一个router.js文件，用于配置路由。在该文件中，我们需要定义路由路径和路由组件： ``` import Vue from 'vue' import VueRouter from 'vue-router' import Login from './components/Login.vue' import Register from './components/Register.vue' Vue.use(VueRouter) const routes = [ { path: '/login', component: Login }, { path: '/register', component: Register } ] const router = new VueRouter({ routes }) export default router ``` 在上面的代码中，我们定义了两个路由路径：/login和/register，并分别对应了Login和Register两个组件。 接下来，在App.vue中，我们需要使用<router-view>标签来显示路由组件： ``` <template> <div id="app"> <router-view></router-view> </div> </template> ``` 最后，在main.js中引入router.js，并将其挂载到Vue实例中： ``` import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app') ``` 至此，我们已经完成了基本的路由配置。接下来，我们可以在Login和Register组件中实现具体的登录和注册功能。 在Login组件中，我们可以使用Vue.js提供的v-model指令来绑定表单输入的数据，并在点击登录按钮时向服务器发送请求验证用户名和密码： ``` <template> <div class="login"> <h1>登录</h1> <form> <label>用户名：</label> <input type="text" v-model="username"> <br> <label>密码：</label> <input type="password" v-model="password"> <br> <button @click.prevent="login">登录</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '' } }, methods: { login() { // 向服务器发送请求验证用户名和密码 } } } </script> ``` 而在Register组件中，我们可以使用v-model指令来绑定表单输入的数据，并在点击注册按钮时向服务器发送请求创建新用户： ``` <template> <div class="register"> <h1>注册</h1> <form> <label>用户名：</label> <input type="text" v-model="username"> <br> <label>密码：</label> <input type="password" v-model="password"> <br> <label>确认密码：</label> <input type="password" v-model="confirmPassword"> <br> <button @click.prevent="register">注册</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '', confirmPassword: '' } }, methods: { register() { // 向服务器发送请求创建新用户 } } } </script> ``` 到这里，我们已经完成了一个简单的用户登录注册功能，并使用vue-router实现了路由跳转。当用户访问/login时，会显示Login组件；当用户访问/register时，会显示Register组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

火星飞鸟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值