前端案例-33 VueRouter基础案例汇总

最新推荐文章于 2022-08-05 21:04:21 发布
最新推荐文章于 2022-08-05 21:04:21 发布
阅读量227 收藏 1
点赞数
分类专栏： 前端案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KathyLJQ/article/details/118271141
版权
  1. 使用window.onhashchange实现简单的路由
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='js/vue.min.js'></script>
</head>

<body>
    <div id="app">
        <a href="#/zhuye">主页</a>
        <a href="#/keji">科技</a>
        <a href="#/caijing">财经</a>
        <a href="#/yule">娱乐</a>

        <component :is="comNm"></component>
    </div>

</body>
<script>
    const zhuye = {
        template: '<h1>主页信息</h1>'
    }
    const keji = {
        template: '<h1>科技信息</h1>'
    }
    const caijing = {
        template: '<h1>财经信息</h1>'
    }
    const yule = {
        template: '<h1>娱乐信息</h1>'
    }

    const vm = new Vue({
        el: '#app',
        data: {
            comNm: 'zhuye'
        },
        components: {
            zhuye,
            keji,
            caijing,
            yule
        }

    })

    window.onhashchange = function() {
        console.log(location.hash)
        switch (location.hash.slice(1)) {
            case '/zhuye':
                vm.comNm = 'zhuye';
                break;
            case '/keji':
                vm.comNm = 'keji';
                break;
            case '/caijing':
                vm.comNm = 'caijing';
                break;
            case '/yule':
                vm.comNm = 'yule';
                break;
        }
    }
</script>

</html>
  1. Vue Router 路由
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='js/vue.min.js'></script>
    <script src="js/vue-router_3.0.2.js"></script>
</head>

<body>
    <div id="app">
        <router-link to="/zhuye">主页</router-link>
        <router-link to="/keji">科技</router-link>
        <router-link to="/caijing">财经</router-link>
        <router-link to="/yule">娱乐</router-link>

        <router-view></router-view>
    </div>

</body>
<script>
    const zhuye = {
        template: '<h1>主页信息</h1>'
    }
    const keji = {
        template: '<h1>科技信息</h1>'
    }
    const caijing = {
        template: '<h1>财经信息</h1>'
    }
    const yule = {
        template: '<h1>娱乐信息</h1>'
    }

    var router = new VueRouter({
        routes: [{
            path: "/",
            redirect: '/keji'
        }, {
            path: '/zhuye',
            component: zhuye
        }, {
            path: '/keji',
            component: keji
        }, {
            path: '/caijing',
            component: caijing
        }, {
            path: '/yule',
            component: yule
        }]
    })
    const vm = new Vue({
        el: '#app',
        router

    })
</script>

</html>
  1. Vue Router 动态匹配
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='js/vue.min.js'></script>
    <script src="js/vue-router_3.0.2.js"></script>
</head>

<body>
    <div id="app">
        <router-link to="/zhuye/1">主页</router-link>
        <router-link to="/zhuye/2">主页</router-link>
        <router-link to="/zhuye/3">主页</router-link>
        <router-link to="/zhuye/4">主页</router-link>
        <router-link to="/keji">科技</router-link>
        <router-link to="/caijing">财经</router-link>
        <router-link to="/yule">娱乐</router-link>

        <router-view></router-view>
    </div>

</body>
<script>
    const zhuye = {
        template: '<h1>主页信息{{$route.params.id}}</h1>'
    }
    const keji = {
        template: '<h1>科技信息</h1>'
    }
    const caijing = {
        template: '<h1>财经信息</h1>'
    }
    const yule = {
        template: '<h1>娱乐信息</h1>'
    }

    var router = new VueRouter({
        routes: [{
            path: "/",
            redirect: '/keji'
        }, {
            path: '/zhuye/:id',
            component: zhuye
        }, {
            path: '/keji',
            component: keji
        }, {
            path: '/caijing',
            component: caijing
        }, {
            path: '/yule',
            component: yule
        }]
    })
    const vm = new Vue({
        el: '#app',
        router

    })
</script>

</html>
  1. VueRouter 嵌套
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='js/vue.min.js'></script>
    <script src="js/vue-router_3.0.2.js"></script>
</head>

<body>
    <div id="app">
        <router-link to="/zhuye">主页</router-link>
        <router-link to="/keji">科技</router-link>
        <router-link to="/caijing">财经</router-link>
        <router-link to="/yule">娱乐</router-link>

        <router-view></router-view>
    </div>

</body>
<script>
    const zhuye = {
        template: '<h1>主页信息</h1>'
    }
    const keji = {
        template: '<h1>科技信息</h1>'
    }
    const caijing = {
        template: '<h1>财经信息</h1>'
    }
    const yule = {
        template: `<div>
        <h1>娱乐信息</h1>
        <hr>
        <router-link to="/yule/ldh">刘德华</router-link>
        <router-link to="/yule/zxy">张学友</router-link>
        <router-view/>
        </div>
        `
    }
    const ldh = {
        template: '<h1>刘德华信息</h1>'
    }

    const zxy = {
        template: '<h1>张学友信息</h1>'
    }


    var router = new VueRouter({
        routes: [{
            path: "/",
            redirect: '/keji'
        }, {
            path: '/zhuye',
            component: zhuye
        }, {
            path: '/keji',
            component: keji
        }, {
            path: '/caijing',
            component: caijing
        }, {
            path: '/yule',
            component: yule,
            children: [{
                path: '/yule/ldh',
                component: ldh
            }, {
                path: '/yule/zxy',
                component: zxy
            }]

        }]
    })
    const vm = new Vue({
        el: '#app',
        router

    })
</script>

</html>
  1. Vue Router 动态传参props
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='js/vue.min.js'></script>
    <script src="js/vue-router_3.0.2.js"></script>
</head>

<body>
    <div id="app">
        <router-link to="/zhuye/1">主页</router-link>
        <router-link to="/zhuye/2">主页</router-link>
        <router-link to="/zhuye/3">主页</router-link>
        <router-link to="/zhuye/4">主页</router-link>
        <router-link to="/keji">科技</router-link>
        <router-link to="/caijing">财经</router-link>
        <router-link to="/yule">娱乐</router-link>

        <router-view></router-view>
    </div>

</body>
<script>
    const zhuye = {
        props: ["id"],
        template: '<h1>主页信息---{{id}}</h1>'
    }
    const keji = {
        template: '<h1>科技信息</h1>'
    }
    const caijing = {
        template: '<h1>财经信息</h1>'
    }
    const yule = {
        template: '<h1>娱乐信息</h1>'
    }

    var router = new VueRouter({
        routes: [{
            path: "/",
            redirect: '/keji'
        }, {
            path: '/zhuye/:id',
            component: zhuye,
            props: true
        }, {
            path: '/keji',
            component: keji
        }, {
            path: '/caijing',
            component: caijing
        }, {
            path: '/yule',
            component: yule
        }]
    })
    const vm = new Vue({
        el: '#app',
        router

    })
</script>

</html>
  1. Vue Router 对象式传参
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='js/vue.min.js'></script>
    <script src="js/vue-router_3.0.2.js"></script>
</head>

<body>
    <div id="app">
        <router-link to="/zhuye/1">主页</router-link>
        <router-link to="/zhuye/2">主页</router-link>
        <router-link to="/zhuye/3">主页</router-link>
        <router-link :to="{name:'zhuye',params:{id:3}}">主页</router-link>
        <router-link to="/keji">科技</router-link>
        <router-link to="/caijing">财经</router-link>
        <router-link to="/yule">娱乐</router-link>

        <router-view></router-view>
    </div>

</body>
<script>
    const zhuye = {
        props: ["uname", 'id'],
        template: '<h1>主页信息---{{uname}}---{{id}}</h1>'
    }
    const keji = {
        template: '<h1>科技信息</h1>'
    }
    const caijing = {
        template: '<h1>财经信息</h1>'
    }
    const yule = {
        template: '<h1>娱乐信息</h1>'
    }

    var router = new VueRouter({
        routes: [{
            path: "/",
            redirect: '/keji'
        }, {
            name: 'zhuye',
            path: '/zhuye/:id',
            component: zhuye,
            props: route => ({
                uname: 'kathy',
                age: 30,
                id: route.params.id
            })
        }, {
            path: '/keji',
            component: keji
        }, {
            path: '/caijing',
            component: caijing
        }, {
            path: '/yule',
            component: yule
        }]
    })
    const vm = new Vue({
        el: '#app',
        router

    })
</script>

</html>
  1. 编程式导航
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='js/vue.min.js'></script>
    <script src="js/vue-router_3.0.2.js"></script>
</head>

<body>
    <div id="app">
        <router-link to="/zhuye/1">主页</router-link>
        <router-link to="/zhuye/2">主页</router-link>
        <router-link to="/zhuye/3">主页</router-link>
        <router-link :to="{name:'zhuye',params:{id:3}}">主页</router-link>
        <router-link to="/keji">科技</router-link>
        <router-link to="/caijing">财经</router-link>
        <router-link to="/yule">娱乐</router-link>

        <router-view></router-view>
    </div>

</body>
<script>
    const zhuye = {
        props: ["uname", 'id'],
        template: `<div>
        <h1>主页信息---{{uname}}---{{id}}</h1>
        <button @click="goRegister">跳转到娱乐页面</button>
        </div>`,
        methods: {
            goRegister: function() {
                this.$router.push('/yule');
            }
        }
    }
    const keji = {
        template: '<h1>科技信息</h1>'
    }
    const caijing = {
        template: '<h1>财经信息</h1>'
    }
    const yule = {
        // 
        template: `<div>
        <h1>娱乐信息</h1>
        <button @click="goBack">后退</button>
        </div>`,
        methods: {
            goBack: function() {
                this.$router.go(-1);
            }
        }
    }

    var router = new VueRouter({
        routes: [{
            path: "/",
            redirect: '/keji'
        }, {
            name: 'zhuye',
            path: '/zhuye/:id',
            component: zhuye,
            props: route => ({
                uname: 'kathy',
                age: 30,
                id: route.params.id
            })
        }, {
            path: '/keji',
            component: keji
        }, {
            path: '/caijing',
            component: caijing
        }, {
            path: '/yule',
            component: yule
        }]
    })
    const vm = new Vue({
        el: '#app',
        router

    })
</script>

</html>
  1. 综合案例

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='js/vue.min.js'></script>
    <script src="js/vue-router_3.0.2.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            /* position: relative; */
            width: 100%;
            height: 100%;
        }
        /* body>div {
            position: relative;
            width: 100%;
            height: 100%;
        } */
        
        header {
            height: 50px;
            background-color: #545c64;
            color: #fff;
            line-height: 50px;
            text-align: center;
            font-size: 24px;
        }
        
        .main {
            position: absolute;
            top: 50px;
            bottom: 40px;
            display: flex;
            width: 100%;
            /* height: 100%; */
            overflow: hidden;
        }
        
        .nav {
            flex: 2;
            height: 100%;
            font-size: 16px;
        }
        
        .nav ul {
            width: 100%;
            list-style: none;
            height: 100%;
            text-align: center;
            background-color: #545c64;
        }
        
        .nav ul li {
            height: 45px;
            width: 100%;
            border-bottom: 2px solid white;
            background-color: #a0a0a0;
        }
        
        .nav ul li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 45px;
            color: white;
            text-decoration: none;
        }
        
        .content {
            flex: 8;
            height: 100%;
        }
        
        .wrapper {
            text-align: center;
            width: 100%;
        }
        
        footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 40px;
            background-color: #888;
            line-height: 40px;
            text-align: center;
            font-size: 16px;
            color: white;
        }
        
        table {
            margin: 0 auto;
            width: 100%;
            border-collapse: collapse;
        }
        
        table thead {
            width: 100%;
        }
        
        table thead tr {
            background-color: #888;
        }
        
        tr {
            display: flex;
            width: 100%;
        }
        
        td,
        th {
            flex: 3;
            border: 1px solid #eee;
            line-height: 35px;
            font-size: 12px;
        }
        
        td a {
            cursor: pointer;
            color: blue;
        }
        /* td {
            flex: 3;
        } */
    </style>
</head>

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

</body>

<script>
    const App = {

        template: `<div>
            <header>后台管理系统</header>
            <div class="main">
                <div class="nav">
                    <ul>
                        <li><a href="#"><router-link to="/users">用户管理</router-link></a></li>
                        <li><a href="#"><router-link to="/permission">权限管理</router-link></a></a></li>
                        <li><a href="#"><router-link to="/goods">商品管理</router-link></a></li>
                        <li><a href="#"><router-link to="/order">订单管理</router-link></a></li>
                        <li><a href="#"><router-link to="/system">系统设置</router-link></a></li>
                    </ul>
                </div>
                <div class="content">
                    <div class="wrapper">
                        <router-view/>
                    </div>                 
                </div>               
            </div>
            <footer>版权信息</footer>
        </div>
   `
    }

    const Users = {
        data() {
            return {
                userlist: [{
                    id: 1,
                    name: "zhangsan",
                    age: 20
                }, {
                    id: 2,
                    name: "lisi",
                    age: 20
                }, {
                    id: 3,
                    name: "wangwu",
                    age: 20
                }, {
                    id: 4,
                    name: "zhaoliu",
                    age: 20
                }, ]
            }
        },
        template: `<div>
            <h3>用户管理</h3>
            <table>
                <thead><tr><th>id</th><th>姓名</th><th>年龄</th><th>操作</th></tr></thead>
                <tbody :key="item.id" v-for="item in userlist">
                    <tr>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.age}}</td>
                        <td><a @click="detail(item.id)">详情</a></td>
                    </tr>
                </tbody>
            </table>
            </div>`,
        methods: {
            detail: function(id) {
                this.$router.push('/detail/' + id)
            }
        }
    }
    const Detail = {
        props: ['id'],
        template: `<div>
        <h1>{{$route.params.id}}详情</h1>
        <button @click="goBack()">后退</button>
        </div>`,
        methods: {
            goBack() {
                this.$router.go(-1)
            }
        }
    }
    const Permission = {
        template: `<div>
            <h3>权限管理</h3>
            </div>`

    }
    const Goods = {
        template: `<div>
            <h3>商品管理</h3>
            </div>`

    }
    const Order = {
        template: `<div>
            <h3>订单管理</h3>
            </div>`

    }
    const System = {
        template: `<div>
            <h3>系统管理</h3>
            </div>`

    }
    const router = new VueRouter({
        routes: [{
            path: '/',
            component: App,
            children: [{
                path: '/users',
                component: Users
            }, {
                path: '/permission',
                component: Permission
            }, {
                path: '/goods',
                component: Goods
            }, {
                path: '/system',
                component: System
            }, {
                path: '/order',
                component: Order
            }, {
                path: '/detail/:id',
                component: Detail,
                props: true
            }]
        }, ]
    })
    const vm = new Vue({
        el: '#app',
        router
    })
</script>

</html>
KathyLJQ
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue学习第27天——路由vue-router的详解及案例练习
背心的博客
09-21 2420
路由vue-router的详解及案例练习
Vue Router使用示例
lovoo的博客
03-31 855
Vue.js 路由允许我们通过锚点定义不同的 URL， 达到访问不同的页面的目的，每个页面的内容通过延迟加载渲染出来。通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）映射表：[内网ip1:电脑标识1，内网ip2:电脑标识2]路由器 -> 公网IP -> 映射表 -> 内网IP。创建文件夹 router，创建index.html。特点：单页Web应用，预先加载页面内容。路由包括路由和转发。
vue-VueRouter-后台管理案例
gaogzhen的博客
07-29 1401
vue-VueRouter-后台管理案例 目录 文章目录1、UI界面2、项目分析3、项目改造3.1、抽离并渲染App根组件3.2、把左侧菜单改造为路由链接3.3、创建左侧菜单对应的组件3.4、右侧主体区域添加路由占位符3.5、添加子路由规则3.6、通过路由重定向默认渲染用户组件3.7、渲染用户列表数据3.8、编程式导航跳转到用户详细页3.9、实现后退功能4、完整代码及效果图***后记*** ： 内容 1、UI界面 一般情况下，前端页面由UI做好页面（html+css)给我们，我们根据UI页面修改为
基于vue-router的实例案例
weixin_46005715的博客
07-13 397
基本样式如下: <head> <meta charset="UTF-8" /> <title>基于vue-router的实例案例</title> <style type="text/css"> html, body, #app { margin: 0; padding: 0px; height: 100%; } .he
vue2---前端路由小案例（后台管理小案例）
qq_61950936的博客
08-05 1887
前端路由小案例（后台管理小案例）1 项目整体功能演示3 主要代码进入网站自动进入登录页面： 登录成功自动存储token，然后跳转到登录成功页面： 左边功能栏可以切换： 点击用户管理的操作可以跳转到用户详情页面，并却可以回退到上一步： 完了之后可以退出登录，并清除token，然后跳转到登录页面。2 案例用到的知识点命名路由路由重定向导航守卫嵌套路由动态路由匹配编程式导航......
WEB前端开发-案例汇总(81例).zip
05-08
《WEB前端开发-案例汇总(81例)》是一个丰富的前端学习资源库，包含了81个不同的实战案例，旨在帮助初学者逐步进阶，并为有经验的开发者提供设计和参考。这个压缩包中的每个文件代表一个独立的项目，涵盖了前端开发的...
前端项目-vue-router.zip
09-02
Vue.js的路由器，Vue Router，是前端开发中的一个重要组件，它是专门为Vue.js设计的状态管理工具，用于处理应用程序的路由和导航。Vue Router使得在单页面应用（SPA）中管理页面跳转和数据流变得简单易行，从而提升...
基于vue-cli vue-router搭建底部导航栏移动前端项目
01-21
vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述，主要参考 Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目   2.项目呈现效果 项目呈现网址：www.zhoupeng520.cn/index.html  项目中主要用了Flex布局，...
WEB前端-案例汇总
11-08
通过这个“WEB前端-案例汇总”，学习者不仅可以全面了解前端开发的各个方面，还能通过实践提升解决问题的能力，为成为专业的前端开发者奠定坚实基础。无论是HTML5的新特性，还是前沿的前端框架，都能在这个资源包中...
前端开发-电影智能推荐系统的前端实现-基于vue实现.zip
最新发布
04-02
在本项目中，我们主要探讨的是如何利用Vue.js这一现代前端框架来构建一个电影智能推荐系统的前端部分。Vue.js是一个轻量级、高性能且灵活的JavaScript框架，它以组件化开发为核心，使得开发者能够高效地构建用户界面...
vue-router项目实战总结篇
11-28
今天来谈谈vue项目{vue,vue-router,component}三大神将之一的vue-router。作为我们前后端分离很重要的实践之一，router帮我们完成了SPA应用间的页面跳转。 并且，配合axios这样的第三方库，我们可以实现配合后台接口的拦截器功能。 对于一个小型项目而言,router这个文件夹里面就包含了一个router.js就足够了， 但是，当我们的页面比较多的时候，我们就需要分出两个文件出来：一个定义我们的路由和组件，另一个实例化组件，并将路由挂载到vue的实例上。 基本的用法就不多赘述，大家可以看vue-router的官网，认真过一遍的话，基本使用肯定没什么问题。 1
vue-router案例.zip
01-25
基于vueRouter的后台管理功能
vue简单项目实例（router方式）
07-04
vue-cli搭建的vue实例，用router和组件的简单实例，下载后请cnpm install后npm run dev运行
Vue学习笔记（六）--- 前端路由 Vue Router
weixin_45092437的博客
10-19 5349
一、路由 1、概念 ​ 路由本质上来说就是一种对应关系，比如说我们在浏览器中输入不同的 url 地址，我们就能访问不同的资源，那么这 url 地址与资源之间的对应关系，就是路由。 2、分类 ① 后端路由 ​ 后端路由是通过服务器实现的，根据不同的用户 url 请求，返回不同的资源，本质上就是 url 地址与服务器资源之间的对应关系。 ② 前端路由 ​ 前端路由是通过页面 hash 值(锚链接) 的变化实现的，根据不同的页面事件来显示不同的页面内容，本质上是用户事件与事件处理函数之间的对应关系。 ​
路由器界面html模板,Javascript实现前端简单的路由实例
weixin_33050129的博客
06-10 907
前言前端路由在很多开源的js类库框架中都得到支持，如angularJS，Backbone，Reactjs等等。前端路由和后端路由原理一样，是让所有的交互和展现在一个页面运行以达到减少服务器请求，提高客户体验的目的，越来越多的网站特别是web应用都用到了前端路由。HTML页面中有一个导航菜单ul，和一个div#result用来显示结果，当点击导航菜单时，#result中会显示不同的结果内容。首页产品...
[Vue.js] 路由 -- 基于vue-router的案例--后台管理
DeathDomain的博客
11-04 695
基于vue-router的案例 感觉好多,啊啊啊!!! 实现效果   实现步骤 抽离并渲染App根组件 将左侧菜单改造为路由链接 创建左侧菜单对应的路由组件 在右侧主体区域添加路由占位符 添加子路由规则 通过路由重定向默认渲染用户组件 渲染用户列表数据 编程式导航跳转到用户详情页 实现后退功能   抽离并渲染App根组件 首先要引入vue.js和vue-router.js <script src="https://cdn.jsdelivr.net/npm/vue/di
vue.js路由（vue-router）详解+案例
清风无虑skr的博客
06-18 1522
简介： 对于大多数单页面应用，都推荐使用官方支持的vue-router，其实简单的说路由就是跳转，和HTML<a>标签实现的效果是一样的，都是添加过路径后便可以跳转到相应位置，可能有人会说那还学vue-router干嘛直接用a标签实现不就可以了，这里就要提到vue的优点了，vue-router让构建单页面应用变得易如反掌，而如果使用a标签你需要写好多代码构造页面。(●ˇ∀ˇ●) 安装： 1、通过script标签直接引用 https://unpkg.com/vue-router@2.0.0/dis
五:前端路由--基于Vue-router的案例
Hhytyq的博客
03-11 373
一：概述 常见的后台管理系统： 用到的路由技术要点： 路由的基础用法 嵌套路由 路由重定向 路由传参 编程式导航 基本样式： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>基于vue-router的案例</title...
前端学习（266）:justify-content
歌谣的博客
12-31 336
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
外卖项目-前后端分离-前端vue-后端springboot
07-16
外卖项目的前后端分离是指将项目的前端部分和后端部分进行分离开发，前端使用Vue框架，后端使用Spring Boot框架。 前端使用Vue框架可以提供良好的用户界面和交互体验。Vue具有组件化的特点，使得前端开发更加模块化...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值