前端导航跳转
问题
前端点击导航是会跳转页面并且是跳转到一个新的页面。
期望
点击导航时导航不刷新,不进入新的页面,所需页面进入指定内容区域。
解决
修改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/>
只是路径变化,页面跳转。