前端导航跳转

前端导航跳转

问题

前端点击导航是会跳转页面并且是跳转到一个新的页面。

期望

点击导航时导航不刷新,不进入新的页面,所需页面进入指定内容区域。

解决

修改router文件的路由

import Vue from "vue";
import VueRouter from "vue-router";

import commons from "../views/index";

Vue.use(VueRouter);

const routes = [
    {
        path: "/",
        name: "index",
        meta: {
            name: "首页",
        },
        status: 1,
        component: commons,
        children: [
            {
                path: "/",
                name: "index",
                meta: {
                    name: "首页",
                    icon: "icon iconshouye"
                },
                component: () => import("../views/home/index")
            }, {
                path: "/blog",
                name: "blog",
                meta: {
                    name: "博客",
                    icon: "icon iconnavicon-wzgl"
                },
                component: () => import("../views/blog/index.vue")
            }, {
                path: "/introduce",
                name: "introduce",
                meta: {
                    name: "简介",
                    icon: "icon icongerenjianjie"
                },
                component: () => import("../views/introduce/index.vue")
            }, {
                path: "/life",
                name: "life",
                meta: {
                    name: "生活",
                    icon: "icon iconicon"
                },
                component: () => import("../views/life/index.vue")
            }, {
                path: "/contact",
                name: "contact",
                meta: {
                    name: "关于我",
                    icon: "icon iconbangzhuguanyuwomen"
                },
                component: () => import("../views/contact/index.vue")
            }, {
                path: "/message",
                name: "message",
                meta: {
                    name: "留言",
                    icon: "icon iconweixin"
                },
                component: () => import("../views/message/index.vue")
            }
        ]
    }, {
        path: "/login",
        name: "login",
        meta: {
            name: "登录"
        },
        component: () => import("../views/admin/login")
    }

];

const router = new VueRouter({
    routes
});

export default router;

import commons from "../views/index";

  • index页面

    <template>
        <div class="index-body">
            <!--导航-->
            <navMenu/>
            <!--主要内容-->
            <mainMenu/>
        </div>
    </template>
    
    <script>
        import navMenu from "./commons/nav.vue"
        import mainMenu from "./commons/main.vue"
    
        export default {
            name: "index",
            components: {
                mainMenu,
                navMenu
            }
        }
    </script>
    
    <style lang="scss" scoped>
    
    </style>
    
    
  • 主要内容页面

    <template>
        <div class="main-content">
            <router-view/>
        </div>
    </template>
    
    <script>
        export default {
            name: "mainIndex"
        }
    </script>
    
    <style lang="scss" scoped>
        @import "../../styles/config.scss";
    
        .main-content {
            width: 100%;
            height: 100vh;
        }
    </style>
    
    
总结

路由router文件设置时关键,引入commons,把你想跳转的页面跳转到main.vue文件中的

<router-view/> 里面去。

如果没有<router-view/> 只是路径变化,页面跳转。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值