vue路由二级菜单
当朋友们看到这个文章时想必是想要了解vue路由二级菜单相关的知识，这里同时多从个角度为大家介绍vue二级路由的配置相应的内容。
本文内容目录一览：
vue路由（一、二级路由）
是前台为了实现单页面应用然后设置路径，根据不同的路径显示不同页面。但是这些路径在服务器上不是真是存在的
hash路由 默认的是hash路由
history路由
通过onhashchange()来检测路由的变化,根据不同的hash来显示不同元素。获取当前的hash值location.hash
通过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
4、设置导航 router-link to="/ / "
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:'one',
children:[{
path:'one',
name:'one',
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:'*' 必须要放最后 */
/* 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" */
viwes文件下：
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 组件是用来展示组件的容器 --
router-view/
!-- 创建两个组件ChildA 和ChildB 并写两个 router-link 可以实现跳转
组件显示在 router-view 容器中 --
/div
/template
style
#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="about"
h1This is an about 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
AboutChild.vue文件：
template
div
h1AboutChild/h1
/div
/template
script
export default {
}
/script
style
/style
HomeView.vue文件：
template
div class="home"
h1KW47冲冲冲/h1
router-link to="/one"ONEview/router-link
!-- 二级路由对应的组件容器 --
router-view/router-view
/div
/template
script
// @ is an alias to /src
export default {
name: 'HomeView',
components: {
}
}
/script
OneView.vue文件：
template
div
h1我是ONEVIwe/h1
/div
/template
script
export default {
}
/script
style
/style
components文件下：
ChildA.vue文件：
template
div
h1我是CHildA/h1
/div
/template
script
export default {
}
/script
style
/style
ChildB.vue文件：
template
div
h1我是ChildB/h1
/div
/template
script
export default {
}
/script
style
/style
NotFound.vue文件:
template
div
h1我是notfound/h1
/div
/template
script
export default {
}
/script
style
/style
左边文件目录：
如何用vue实现二级菜单栏
二级菜单导航是一种很普遍的功能，一般网页都会有这个功能。如果是平常的做法就是改变url，跳到相应的页面；还有一种就是frame。
如果用vue的话，可以用vue-router改变router-view里面的组件，这样就能做到不刷新页面都能跳到相应“页面”。其实url地址还是变了，但是他没有刷新页面其他位置的内容，只是改变了router-view里面的组件，渲染了新的组件。
vue路由二级菜单的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue二级路由的配置、vue路由二级菜单的信息别忘了在本站进行查找喔。
