前端导航跳转

前端导航跳转

问题

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

期望

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

解决

修改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/> 只是路径变化，页面跳转。