Vue-路由跳转(引用el怎么跳转路由+路由伸缩)

最新推荐文章于 2023-11-29 10:52:59 发布

专注学习java

最新推荐文章于 2023-11-29 10:52:59 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_45969142/article/details/112012259

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

Vue中路由的跳转

1.引入路由依赖

main.js文件

import Vue from 'vue'
import App from './App.vue'
//引入路由
import router from './router'

import axios from 'axios'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.prototype.$axios = axios;

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

2.编写APP.vue

APP.vue里面就不要写跳转页面的逻辑了，会报错的。APP.vue就只写路由的视图就行了。

<template>
    <div id="app">
    	<!--路由的视图(主视图)-->
        <router-view></router-view>
    </div>
</template>


<script>
    export default {
        name: 'app'
    }
</script>

3.从el框架找一个导航栏（只需要修改两个地方即可)

<template>
    <div id="app">
        <!--首部的导航栏-->

        <!--路由跳转前提-->
        <!--这个得加-->
      <!--  第一处修改-->
        <!-- router="true"-->
        
        <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#000000"
                text-color="#fff"
                active-text-color="#0082FF"
                router="true"
        >
            <el-menu-item index="1" disabled text-color="#FFFFFF" style="font-size: 28px;">
                你好，欢迎来到软特福来！服务热线：021-2807-0999
            </el-menu-item>
              <!-- 第二处修改，用v-bond绑定路径 路径要对应index.js里面的东西-->
            <el-menu-item :index="{path:'/HomePage'}" style="font-size: 28px; ">首页</el-menu-item>
            <el-menu-item index="3" style="font-size: 28px; ">消息</el-menu-item>
            <el-menu-item index="4" style="font-size: 28px; ">动态</el-menu-item>
            <el-menu-item index="5" style="font-size: 28px; ">运动建议</el-menu-item>
            <el-menu-item index="6" style="font-size: 28px; ">个人中心</el-menu-item>
        </el-menu>
        
		//这里一定不要忘了(这是子视图的，可以调节大小)
        <router-view></router-view>


    </div>
</template>

<script>
    export default {
        name: "NavigationTop",
        data() {
            return {
                activeIndex: '1'
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                //打印选择的路由
                console.log(key, keyPath);
            }
        }
    }
</script>

<style>
    .bootom{
        position: fixed;
        bottom: 0;
    }
</style>

4.编写router里面的index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import NavigationTop from "../components/NavigationBar/NavigationTop";
import ShouYe from "../views/ShouYe";

Vue.use(VueRouter);

onst routes = [{
    
    //主路由路径
    path: '/NavigationTop',
    name: 'NavigationTop',
    component: NavigationTop,
    props: true,
    //子界面
    children: [
    {
        path: '/ShouYe',
        name: 'ShouYe',
        component: ShouYe,
        props: true
    }]
  }
]
const router = new VueRouter({
    routes
});

export default router

5.自己编写一个子界面ShouYe.vue即可

<template>
    <div>
    <div style="margin-left: 900px;font-size: 80px"><p>你好</p></div>
    </div>
</template>

<script>
    export default {
        name: "ShouYe"
    }
</script>

<style scoped>

</style>

6.执行结果(这里就没用例子里的结果了，自己重写了一个侧边栏用作结果了）
在这里插入图片描述

这里解释一下，为什么app.vue需要一个，而在导航栏中也需要。
因为app.vue是个主路由，控制整个电脑的屏幕
导航栏里面写的是子路由，与自己router.js里面的写的children对应起来了

注意：是不是觉得这个照片的导航栏里面的字体，没有变颜色？我也不知道咋回事，所以我就重新查了个资料，重新写一个(可以变颜色，也可以自带伸缩功能的导航栏)。

先看结果
在这里插入图片描述
这边是重新来了：

1.App.vue

<template>
    <div style="background-color: #EBEBEB;min-height:800px">
        <div style="width:100%;background-color: #636363; overflow: hidden">

            <span class="demonstration" style="float:left;padding-top:10px;color:white;margin-left:1%;">
                RetalLife管理员后台系统
            </span>
            <span class="demonstration" style="float:left;padding:5px;color:white;margin-left:2%;width:15%">
                <el-input
                        placeholder="请输入"
                        icon="search"
                        v-model="searchCriteria"
                        :on-icon-click="handleIconClick">
                </el-input>
            </span>
            <span class="demonstration" style="float:right;padding-top:10px;margin-right:1%">
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link" style="color:white">
                    admin<i class="el-icon-caret-bottom el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>个人信息</el-dropdown-item>
                    <el-dropdown-item>退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
            </span>
        </div>

        <div style="margin-top:0px">
            <el-row :gutter="10">
                <el-col :xs="4" :sm="4" :md="4" :lg="4">
                    <div>
                        <el-menu default-active="1"
                                 class="el-menu-vertical-demo"
                                 style="min-height:800px"
                                 background-color="#294256"
                                 @select="handleSelect"
                                 :collapse="isCollapse"
                        >
                            <el-menu-item index="1">  <i :class="{'el-icon-s-fold': isCollapse == false?true:false, 'el-icon-s-unfold': isCollapse == true?true:false}" @click="isC"></i></el-menu-item>
                            <el-menu-item index="1"><i class="el-icon-message"></i> <span slot="title">导航一</span></el-menu-item>
                            <el-menu-item index="2"><i class="el-icon-menu"></i> <span slot="title">导航二</span></el-menu-item>
                            <el-menu-item index="3"><i class="el-icon-setting"></i> <span slot="title">导航三</span></el-menu-item>
                        </el-menu>
                    </div>
                </el-col>
                <el-col :xs="20" :sm="20" :md="20" :lg="20">
                    <div style="margin-top:10px">
                        <router-view></router-view>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
        data(){
            return {
                searchCriteria: '',
                isCollapse: false
            }
        },
        methods:{
            handleIconClick(ev) {
                console.log(ev);
            },

            handleSelect(key, keyPath){
                console.log(keyPath);
                switch(key){
                    case '1':
                        this.$router.push('/ciyun');
                        break;
                    case '2':
                        this.$router.push('/ciyuntwo');
                        break;
                }
            },
            isC(){
                this.isCollapse = !this.isCollapse
            }
        },
    }
</script>

2.index.js（router文件里面的）

import Vue from 'vue';
import VueRouter from 'vue-router';
import ciyun from "../views/ciyun";
import ciyuntwo from "../views/ciyuntwo";

Vue.use(VueRouter);

const routes = [
    {
        path: '/ciyuntwo',
        name: 'ciyuntwo',
        component: ciyuntwo,
        props: true
    },
    {
        path: '/ciyun',
        name: 'ciyun',
        component: ciyun,
        props: true
    }
];

const router = new VueRouter({
    routes,
    // 去掉#号
    mode: 'history'
});

export default router

3.ciyuntwo.vue

<template>
    <div style="margin-left: 900px;font-size: 80px"><p>词云2</p></div>
</template>
<script type="text/ecmascript-6">
    export default {
        data(){
            return {}
        }
    }
</script>

4.ciyun.vue

<template>
    <div class="hello">
        <div id="app" :style="{ height:height,width:width }">
            <wordcloud
                    :data="defaultWords"
                    nameKey="name"
                    valueKey="value"
                    :color="myColors"
                    :showTooltip="false"
                    :wordClick="wordClickHandler">
            </wordcloud>
        </div>
    </div>
</template>
<script>
    import wordcloud from 'vue-wordcloud'
    export default {
        name: 'app',
        components: {
            wordcloud
        },
        methods: {
            wordClickHandler(name, value, vm) {
                console.log('wordClickHandler', name, value, vm);
            }
        },
        data() {
            return {
                myColors: ['#1f77b4', '#629fc9', '#94bedb', '#c9e0ef'],
                defaultWords: [{
                        name: "十九大精神",
                        value: 15000
                    },
                    {
                        name: "两学一做",
                        value: 10081
                    },
                    {
                        name: "中华民族",
                        value: 9386
                    },
                    {
                        name: "马克思主义",
                        value: 7500
                    },
                    {
                        name: "民族复兴",
                        value: 7500
                    },
                    {
                        name: "社会主义制度",
                        value: 6500
                    },
                    {
                        name: "国防白皮书",
                        value: 6500
                    },
                    {
                        name: "创新",
                        value: 6000
                    },
                    {
                        name: "民主革命",
                        value: 4500
                    },
                    {
                        name: "文化强国",
                        value: 3800
                    },
                    {
                        name: "国家主权",
                        value: 3000
                    },
                    {
                        name: "武装颠覆",
                        value: 2500
                    },
                    {
                        name: "领土完整",
                        value: 2300
                    },
                    {
                        name: "安全",
                        value: 2000
                    },
                    {
                        name: "从严治党",
                        value: 1900
                    },
                    {
                        name: "现代化经济体系",
                        value: 1800
                    },
                    {
                        name: "国防动员",
                        value: 1700
                    },
                    {
                        name: "信息化战争",
                        value: 1600
                    },
                    {
                        name: "局部战争",
                        value: 1500
                    },
                    {
                        name: "教育",
                        value: 1200
                    },
                    {
                        name: "职业教育",
                        value: 1100
                    },
                    {
                        name: "兵法",
                        value: 900
                    },
                    {
                        name: "一国两制",
                        value: 800
                    },
                    {
                        name: "特色社会主义思想",
                        value: 700
                    }
                ]
            }
        }
    }
</script>

再推荐一个gif录制工具：https://www.52pojie.cn/forum.php?mod=viewthread&tid=937643

参考文章：https://blog.csdn.net/qq_41126139/article/details/102413487
https://blog.csdn.net/xuehu837769474/article/details/82012361

专注学习java

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue-路由跳转(引用el怎么跳转路由+路由伸缩)

老实讲刚学路由跳转的时候，人都是傻的。感觉懵的很。等自己了解的差不多的时候，又发现挺简单的。自己就简单的把路由跳转给演示一下吧！附上源码。前提：我用的编译环境是vue脚手架,node.js。main.jsimport Vue from 'vue'import App from './App.vue'import axios from 'axios'//路由的关键import router from './router'// ElementUI 框架import ElementUI from
复制链接

扫一扫