如何实现Vue路由的二级菜单-编程知识

Vue路由（一、二级路由）

一级路由配置

二级路由配置

Vue中展示二级路由的默认模块/二级路由默认显示

Vue路由，二级路由及跳转

如何用vue实现二级菜单栏

◼️ 相关参考资料

当朋友们看到这个文章时想必是想要了解vue路由二级菜单相关的知识，这里同时多从个角度为大家介绍vue二级路由的配置相应的内容。

Vue路由（一、二级路由）

是前台为了实现单页面应用然后设置路径，根据不同的路径显示不同页面。但是这些路径在服务器上不是真是存在的。

hash路由：默认的是hash路由，过onhashchange()来检测路由的变化,根据不同的hash来显示不同元素。获取当前的hash值location.hash

history路由：通过onpopstate来检测history堆栈路径的变化，堆栈的路径是通过history.pushState(null, '',"?page=2")添加进去的

由hash路由设置成history路由，给路由添加配置项 mode="history"。

一级路由配置

1、设置相应组件

2、在router-index.js文件中添加路由配置

首先，引入组件，然后配置路由规则 {path:设置路径，name:名，component:组件}

3、在需要当前组件的地方给页面添加<router-view></router-view>

4、设置导航路径

使用vue提供<router-link to="路径"></router-link> ，默认的解析成a标签

5、设置默认路由

6、设置导航链接的样式

二级路由配置

1、需要定义组件

2、确定好在哪个组件配置二级路由，就去哪个组件的配置规则中添加children关键字，按照一级路由的配置方法配置规则

3、在需要配置二级路由的组件中添加<router-view></router-view>

4、设置导航路径

使用vue提供<router-link to="路径"></router-link> ，默认的解析成a标签

5、设置导航链接的样式

我们可以定义一个一级路由，里面可以包裹底部footer组件，让他为二级路由，这时点击底部的二级路由时，就会切换不同的页面，而不需要底部组件显示的时候，那我们再配置一个一级路由就好了！！！

Vue中展示二级路由的默认模块/二级路由默认显示

1. 新建一个二级路由导入到router/index.js 并配置

2. 在盛放子路由的页面加入router-link 与 router-view标签

3. 点击带有router-link标签的按钮即可展示子路由

Vue路由，二级路由及跳转

* router/index.js文件：

/* 导入Vue构造函数 */
import Vue from "vue";
/* 导入路由VueRouter构造函数 */
import VueRouter from "vue-router";
/* 导入HomeView页面 */
import HomeView from "../views/HomeView.vue";// 调用构造函数Vue的use方法，传入VueRouter构造函数
// 作用是把VueRouter作为一个插件全局插入到Vue中
Vue.use(VueRouter);/* 定义一个路由数组对象 */
const routes = [/***一个对象就对应了一个路由*path 就是路由的地址*name 给路由起的名字*component 具体跳转的是哪个组件页面*/{/* path: '/' 根页面，表示已进入就显示的页面 */path: "/",name: "home",/* 这种方式一进入页面就会全部加载，不是用到的时候再加载，性能没有懒加载的方式好 */component: HomeView,/* 可以使用redirect重定向，一进入主页就展示第一个子页面，redirect 后面跟的是路径名，并不是name *//* 因为/是根路径，所以可以直接写one */redirect: "oneview",children: [{path: "oneview",name: "oneview",component: () => import("../views/OneView.vue"),},],},{/* 这里是一级目录所以可以加斜杠/，表示根目录 */path: "/about",name: "about",// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited./* 懒加载功能：一开始不加载，当你切换路由的时候再加载 */component: () =>import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),/* about不是根路径，所以redirect后面要写全'/about/aboutchild' */redirect: "/about/aboutchild",children: [{path: "aboutchild",name: "aboutchild",component: () => import("../views/AboutChild.vue"),},],},{path: "/ChildA",name: "ChildA",component: () => import("../components/ChildA.vue"),},{path: "/ChildB",name: "ChildB",component: () => import("../components/ChildB.vue"),},{/* path:'*' 必须要放最后 *//* path:'*' 表示上面的路由没有匹配到，则进入下面的页面 */path: "*",name: "notfound",component: () => import("../components/NotFound.vue"),},
];/* 实例化构造函数 VueRouter 产生一个实例化对象，并把上面的路由数组对象routes当作参数 以对象的方式传给构造函数 VueRouter */
const router = new VueRouter({routes,
});/* 把实例化路由对象 router默认导出  */
export default router;

* main.js文件：

/* 导入Vue构造函数 */
import Vue from "vue";
/* 导入App.vue入口页面 */
import App from "./App.vue";
/* 导入router文件夹中的index.js中的router实例化对象 */
/* 因为一个文件夹里面只有一个index.js文件，所以在脚手架中可以把./router/index.js简写为./router  */
import router from "./router";/* 生产提示 */
/* 改成false是用来关闭开发者提示 */
Vue.config.productionTip = false;
/* 在Vue的对象参数里面配置 el:"#app" 等于.$mount('#app')，都是用来挂载到id为#app的div上的 */
/* 把路由实例化对象router配置在Vue中，作用是保证项目中所有的vue文件都可以使用router路由的属性和方法 */
new Vue({router /* 会把所有vue文件渲染到App组件上 */,render: (h = h(App)),
}).$mount("#app"); /* 等同于el:"#app" */

* views/App.vue文件：

<template><div id="app"><nav><!-- router-link组件是负责路由跳转的，to属性是用来写跳转路径的。router-link组件本质上是用a标签来实现的，路由跳转的原理是根据锚点来的 --><router-link to="/">Home</router-link><router-link to="/about">About</router-link><router-link to="/ChildA">点我跳转ChildA</router-link><router-link to="/ChildB">点我跳转ChildB</router-link></nav><!-- router-view 组件是用来展示组件的容器 --><!-- 创建两个组件ChildA和ChildB，并写两个router-link组件标签可以实现跳转，跳转组件显示在router-view容器中 --><router-view></router-view></div>
</template>
<style scoped>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}nav {padding: 30px;
}nav a {font-weight: bold;color: #2c3e50;
}/* .router-link-exact-active 跳转链接被激活的时候加载到router-link身上 */
nav a.router-link-exact-active {color: #42b983;
}
</style>

AboutView.vue文件：

<template><div class="aboutview"><h1>This is an AboutView page</h1><!-- to后面写的是路径 --><!-- <router-link to="/about/aboutchild">我是aboutchild</router-link>--><!-- to 后面要加冒号: 作用是把后面解析成一个对象而不是字符串 --><router-link :to="{ name: 'aboutchild' }">我是aboutchild</router-link><!-- 二级路由显示的容器  --><router-view></router-view></div>
</template>
<script>
export default{name:"aboutview",components: {AboutChild",},};
</script><style scoped>
</style>

* AboutChild.vue文件：

<template><div class=aboutChild><h1>AboutChild</h1></div>
</template>
<script>
export default {
}
</script>
<style scoped></style>

* HomeView.vue文件：

<template><div class="homeview"><h1>go!go!go!</h1><router-link to="/oneview">我是OneView</router-link><!-- 二级路由对应的组件容器   --><router-view></router-view></div>
</template><script>
export default {name: "HomeView",components: {OneView},
};
</script>

* OneView.vue文件：

<template><div class="oneview"><h1>我是OneView</h1></div>
</template>
<script>
export default {}
</script>
<style scoped></style>

* components/ChildA.vue文件：

<template><div class="childA"><h1>我是childA</h1></div>
</template>
<script>export default {}
</script><style scoped></style>

* ChildB.vue文件：

<template><div class="childB"><h1>我是childB</h1></div>
</template>
<script>
export default {}
</script><style scoped></style>

* NotFound.vue文件:

<template><div class="notfound"><h1>我是NotFound</h1></div>
</template>
<script>
export default {}
</script><style scoped></style>

左边文件目录：

如何用vue实现二级菜单栏

二级菜单导航是一种很普遍的功能，一般网页都会有这个功能。如果是平常的做法就是改变url，跳到相应的页面；还有一种就是frame。

如果用vue的话，可以用vue-router改变router-view里面的组件，这样就能做到不刷新页面都能跳到相应“页面”。其实url地址还是变了，但是他没有刷新页面其他位置的内容，只是改变了router-view里面的组件，渲染了新的组件。

◼️ 相关参考资料

Vue中实现路由跳转传参的4种方式

简单了解一下vue-router是什么