大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

vue+VueRouter多级侧导航切换路由(页面)的实现代码

当当当当当~我又来了。

成都创新互联公司专业提供成都主机托管四川主机托管成都服务器托管四川服务器托管,支持按月付款!我们的承诺:贵族品质、平民价格,机房位于中国电信/网通/移动机房,遂宁托管服务器服务有保障!

在项目里经常会遇到侧导航切换页面的功能。

如果我们将侧导航做成公共组件,来调用的话,就会在每一个页面都引用该组件,在后期维护的时候比较麻烦,比如改参数。

所以此文将侧导航做成父页面组件,将切换的页面做成子页面,这样只需调用一次即可。大大减少了后期维护的麻烦

涉及功能点

侧导航支持多级

Vue Router的使用方法( 官方文档 )

子父组件的写法

样式:elementUI

效果图

vue+Vue Router多级侧导航切换路由(页面)的实现代码

实现

--- 目录结构

vue+Vue Router多级侧导航切换路由(页面)的实现代码

--- Vue Router的使用方法

首先安装 npm install vue-router

然后在 main.js 中引入

import router from './router'

new Vue({
 el: '#app',
 router,
 components: { App },
 template: ''
})

--- vue页面使用Vue Router

App.vue 里引用 router-view

router-view 就相当于一个容器,来渲染我们定义的路由

最好不要在 App.vue 里写太多内容,把它作为祖父级展示就可以啦,能预防新手使用的一些未知错误,如打包出错之类的。

所以,我在在 App.vue 里引用 router-view 只渲染根页面,而 components/page 下新建了一个 index.vue 页面,用来放侧导航和渲染子页面


到此整个侧导航切换路由的页面结构已经完成了

如果你想了解,怎么实现多级导航,那么可以继续向下看~

我将路由都提出来写在了单独的文件里,这样方便统一维护管理

routerindex.js 将页面路由的名字和引用路径都写好

import Router from 'vue-router';
Vue.use(Router);
export default new Router(
 {
  routes: [
   {
    path: '/',
    name: 'main', component: main,
    children: [
     {
      path: '/inputDisabled',
      component: resolve => require(['../components/page/input/index.vue'], resolve),
      meta: {title: '禁止输入'},
     },
     {
      path: '/indexSelect',
      component: resolve => require(['../components/page/input/indexSelect.vue'], resolve),
      meta: {title: 'select联动'},
     },
     {
      path: '/loadMoreUp',
      component: resolve => require(['../components/page/loadMore/loadMoreUp.vue'], resolve),
      meta: {title: '下拉刷新'},
     },
    ],
   },
  ]
 })

--- 侧导航来啦~

我用的是elementUI里的导航插件。

注意

菜单数据结构,我这里写的是嵌套结构,父级套子级。

而不是并级,用标识来区分。

代码思路就是循环套循环



OK 大功告成~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


网站名称:vue+VueRouter多级侧导航切换路由(页面)的实现代码
文章地址:http://dzwzjz.com/article/pihdej.html
在线咨询
服务热线
服务热线:028-86922220
TOP