vue router elementui template CDN模式实现多个页面跳转

年轻的心跳

已于 2023-03-06 20:43:47 修改

阅读量982

点赞数 1

于 2023-03-06 20:33:28 首次发布

本文链接：https://blog.csdn.net/jianyuwuyi/article/details/129369118

版权

elementui 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

vue-router

1 篇文章 0 订阅

订阅专栏

文章目录

前言
一、elementui Tabs标签页和NavMenu 导航菜单是什么？
二、使用方式
- 1.代码如下
- 2.页面效果
总结

前言

写上一篇bloghttps://blog.csdn.net/jianyuwuyi/article/details/128959803的时候因为整个前端都写在一个index.html页面里，为了写更少的代码还有看起来更简洁做了许多偷懒操作，比如用elementui 的Tabs标签页当NavMenu 导航菜单用，虽然效果上看起来差不多，但是导航菜单功能更强大，也更能体现出CDN模式下vue的router、templete的挂载状态，这样才能更好的学习vue、vue-router，开发页面较少的项目时还可以用这种方式少写很多代码。当然，也是为了以后用起vue来更顺手。

一、elementui Tabs标签页和NavMenu 导航菜单是什么？

官方文档：https://element.eleme.cn/#/zh-CN/component/menu
111

二、使用方式

1.代码如下

就这一个页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <router-view></router-view>
</div>
</body>
<template id="sign">
    <div class="handle">
        <div class="handle-input">
            <el-button @click="login" plain>登录</el-button>
        </div>
    </div>
</template>
<template id="manager">
    <div>
        <el-menu
                :default-active="this.$router.path"
                class="el-menu-demo"
                mode="horizontal"
                router
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="/manager/manager1">用户管理</el-menu-item>
            <el-menu-item index="/manager/manager2">角色管理</el-menu-item>
            <el-menu-item index="/manager/manager3">权限管理</el-menu-item>
        </el-menu>
        <router-view></router-view>
    </div>
</template>
<template id="manager1">
    <span>模板1：用户管理</span>
</template>
<template id="manager2">
    <span>模板2：角色管理</span>
</template>
<template id="manager3">
    <span>模板3：权限管理</span>
</template>

<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import Axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- import Router -->
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script>
    const Sign = {
        props: ['todo'],
        template: '#sign',
        data() {
            return {
                username: ''
            }
        },
        methods: {
            login() {
                this.$router.push({
                    name: 'manager',
                    params: {
                    }
                });
            }
        },
        mounted() {
            console.log('组件Sign被挂载了');
        }
    };
    const Manager = {
        props: ['todo'],
        template: '#manager',
        data() {
            return {
                activeIndex: '1'
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        },
        mounted() {
            console.log('组件Manager被挂载了');
        },
        created() {

        }
    };
    const Manager1 = {
        props: ['todo'],
        template: '#manager1',
        data() {
            return {
                token: ''

            }
        },
        methods: {

        },
        mounted() {
            console.log('组件Manager1被挂载了');
        },
        created() {

        }
    };
    const Manager2 = {
        props: ['todo'],
        template: '#manager2',
        data() {
            return {
                token: ''

            }
        },
        methods: {

        },
        mounted() {
            console.log('组件Manager2被挂载了');
        },
        created() {

        }
    };
    const Manager3 = {
        props: ['todo'],
        template: '#manager3',
        data() {
            return {
                token: ''

            }
        },
        methods: {

        },
        mounted() {
            console.log('组件Manager3被挂载了');
        },
        created() {

        }
    };
    const router = new VueRouter({
        routes:[
            {
                path: '/',
                name: 'sign',
                component: Sign
            },
            {
                path: '/manager',
                name: 'manager',
                component: Manager,
                children:[
                    {
                        path: 'manager1',
                        component: Manager1
                    },
                    {
                        path: 'manager2',
                        component: Manager2
                    },
                    {
                        path: 'manager3',
                        component: Manager3
                    }
                ]
            }
        ]
    });
    new Vue({
        router,
        el: '#app',
        data: {

        },
        methods: {

        }
    });
</script>
<style>
    .handle {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin: 0;
        background-image: url(banner.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .handle-input {
        display: flex;
        flex-direction: column;
    }
</style>
</html>

2.页面效果

222

总结

这回贴的代码简洁明了了，没啥好总结的。哦，还有，如果标签页还需要携带参数的话可以参考这篇文章https://blog.csdn.net/qq_40197100/article/details/111587781 ，或者在el-menu-item标签里写个@click事件直接调路由。

年轻的心跳

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue router elementui template CDN模式实现多个页面跳转

写上一篇bloghttps://blog.csdn.net/jianyuwuyi/article/details/128959803的时候因为整个前端都写在一个index.html页面里，为了写更少的代码还有看起来更简洁做了许多偷懒操作，比如用elementui 的当用，虽然效果上看起来差不多，但是导航菜单功能更强大，也更能体现出CDN模式下vue的router、templete的挂载状态，这样才能更好的学习vue、vue-router，页面较少的项目时还可以用这种方式少写很多代码。当然，也是为了以后用起v
复制链接

扫一扫