vue下拉菜单点击触发事件

本篇文章给大家谈谈vue下拉菜单配置路由，以及vue下拉菜单点击触发事件对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、Vue实现动态路由

2、vue实现页面权限中的菜单配置

3、vue项目实现动态路由和动态菜单搭建插件式开发框架免费源码

4、vue项目中关于路由的配置

5、Vue.js 2.0 vue-router怎么设置路由

6、Vue-cli-4-路由配置文件，路由进阶，二级路由

Vue实现动态路由

通常我们在vue项目中都是前端配置好路由的，但在一些项目中我们可能会遇到权限控制，这样我们就涉及到 动态路由 的设置了。

动态路由设置一般有两种 ：

(1)、简单的角色路由设置：比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置

(2)、复杂的路由权限设置：比如OA系统、多种角色的权限配置。通常需要后端返回路由列表，前端渲染使用

到这里，整个动态路由就可以走通了，但是页面跳转、路由守卫处理是异步的，会存在动态路由添加后跳转的是空白页面，这是因为路由在执行next()时，router里面的数据还不存在，此时，你可以通过window.location.reload()来刷新路由

后端返回的路由格式：

注意： vue是单页面应用程序，所以页面一刷新数据部分数据也会跟着丢失，所以我们需要将store中的数据存储到本地，才能保证路由不丢失。关于vue页面刷新保存页面状态，可以查看 vue如何在页面刷新时保留状态信息

vue实现页面权限中的菜单配置

通过一个数组渲染菜单，实现页面权限的自动配置。

n级菜单有n-1级菜单构成......以此类推可得：多级菜单就是通过二级菜单循环构成。在element-ui中找到 NavMenu 导航菜单 组件，使用该组件做一个二级菜单的循环体组件。菜单数据存储在vuex中。

在组件中判断是否有子集来加载不同的模块。二级菜单内部通过插槽来加载循环生成的一级组件数组，如下 list-item 组件

index属性可以用菜单对象中的任意属性代替只需要它是唯一的

从后台获取不同角色的不同菜单数据，再通过两个递归函数来渲染菜单和动态添加菜单路由，实现页面的权限配置。

完整案例：

vue项目实现动态路由和动态菜单搭建插件式开发框架免费源码

以往我们在开发vue项目的时候，总是通过将路径和路由写在route/index.js文件中，然后直接进行访问即可，一般实现权限匹配都是通过菜单下面的权限参数和路由守卫进行一个验证拦截和权限匹配，然而这样安全性仍然不足。因为我们在route/index.js中已经写满了所有的路由，这样子不仅造成静态路由内容过多、修改困难，同时当静态路由内容过多的时候，我们在路由中的内容就显得极其复杂。

而后端对前端的控制也显得较为无力，无法实现严格性的控制。

由此我们发现通过动态路由控制是必然的，此时我们只需要通过后端获取数据菜单和路由信息json，然后动态添加路由并生成菜单，使菜单与动态路由内容进行一个匹配，这样子我们可以实现由后端控制前端的菜单和路由，我们的项目往往只需要内置几个组件无需权限的公共页面如登陆、注册、忘记密码和404错误这几个常用页面组件。

我们只需要将写好的组件放置到我们的view视图下，然后我们通过动态的路由和菜单实现路由添加和菜单进行匹配，我们便可实现对插件进行访问，我们减少了对route/index.js内容写入，同时也有利于减少内存的占用。

我们通过动态路由的形式，我们生成的菜单权限更加的完善，不仅实现依靠菜单与路由守卫拦截实现鉴权，也可以通过动态路由实现动态加载vue文件，控制更加深度

我们通过动态路由的形式，我们可以将项目分给不同的人进行完成，便于组建一个开发团队，因为他们所开发的组件，我们只需要在具备基本的javascript库的情况下。我们直接进行动态路由的一个挂载和菜单生成便可完成项目合作，减少了对route/index.js文件的操作，保证项目的完整性。

最后我发现在非node环境的开发条件下，我们可以实现远程的vue文件加载，这不仅为我们开发提供了便利，同时也有利于我们及时修改文件，以达到项目的需求，更有利于保障安全，实现服务器vue文件加载。

Vue：2.6.11。

Vue-route：3.2.0。

主页

聊天

第一通过后端返回的一个路由json数据，我们通过前端生成符合路由路由静态内容数组的一个数组，然后再通过addRoute进行一个循环添加，我们以此生成动态路由。在登陆时获取后端返回的菜单信息，我们进行菜单的一个循环生成，由此我们的一个动态项目就已经完成。

第二怎样对动态路由和菜单项目进行一个管理。

我们首先可以通过搭建一个组件通过添加路由信息和管理菜单实现二者的动态匹配。我们只需要对路由信息进行一个添加和修改，并和菜单相互间进行匹配，我们便可实现简单的路由挂载。

组件管理

菜单管理

此时将数据提交的后端由后端进行数据保存，我们此时的组件只需要放在views文件夹下，添加路由进行文件加载，我们便可实现路由管理。

第一登陆页面配置。

我们需要在静态文件夹下创建一个menu.json和route.json。两个json文件模拟服务器登录时返回的数据。

我们在登录页面模拟获取数据之后，我们通过菜单的一个方法进行生成菜单，通过路由的方法生成路由数组并进行循环添加，然后执行路由跳转。

第二配置路由初始化内容。我们将route/index.js的路由信息填为空是非常不理智的，而且会报错，因为路由初始化在加载前已经完成。有些页面完全不需要权限便可访问，比如登录、注册、找回密码和404错误，这种不需要权限的页面，我们还是需要将其直接以静态的形式写在route/index.js文件中。

Index初始数据

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue . use ( VueRouter )

const routes = [{

path: '/' , //访问url

name: 'login' , //路由名称

component : () = import ( '@/unitui/pages/Login.vue' ), //加载模板文件

meta: {

show_site: 0 , //是否全屏显示

web_title: "登录" //网站标题

}

},

{

path: '/register' , //访问url

name: 'register' , //路由名称

component : () = import ( '@/unitui/pages/Register.vue' ), //加载模板文件

meta: {

show_site: 0 , //是否全屏显示

web_title: "注册" //网站标题

}

},

{

path: '/forget' , //访问url

name: 'forget' , //路由名称

component : () = import ( '@/unitui/pages/Forget.vue' ), //加载模板文件

meta: {

show_site: 0 , //是否全屏显示

web_title: "找回密码" //网站标题

}

},

{

path: '/404' , //访问url

name: '404' , //路由名称

component : () = import ( '@/unitui/pages/404.vue' ), //加载模板文件

meta: {

show_site: 0 , //是否全屏显示

web_title: "404错误" //网站标题

}

},

]

const router = new VueRouter ({

routes

})

router . beforeEach (( to , from , next ) = {

document . title = to . meta . web_title

console . log ( to );

next ()

})

export default router

第三，关于防止刷新后丢失的问题。我们需要在app.vue文件中的methods方法中定义一个路由生成方法。

示例：

init_route () { //初始化路由，防止刷新丢失

if ( sessionStorage . getItem ( "route_data" ) != null ) { //只有后端已经返回数据的情况下才允许生成

const route_data = JSON . parse ( sessionStorage . getItem ( "route_data" )); //获取路由信息

const data = []; //默认路由数组

for ( let index = 0 ; index route_data . length ; index ++) { //生成路由信息

data [ index ] = {

path: route_data [ index ]. path , //访问url

name: route_data [ index ]. name , //路由名称

component : resolve =

require ([ `@/views/ ${ route_data [ index ]. component } ` ], resolve ), //加载模板文件

meta: {

show_site: route_data [ index ]. meta . show_site , //是否全屏显示

web_title: route_data [ index ]. meta . web_title //网站标题

}

};

}

for ( let index = 0 ; index data . length ; index ++) { //循环添加路由

this . $router . addRoute ( data [ index ]);

}

}

}

在mounted中进行方法调用，防止刷新的时路由丢失，导致发生错误。该方法内容基本和登陆页面的菜单出路由初始内容基本相同，但我们唯一差别的是，我们需要判断登陆所获取的路由信息是否存在，只有在存在的时候及后端已经返回了路由信息，即证明登录成功的时候，我们才会动态添加路由。

第一在刷新之后，默认跳转到path:’*’的一个路由界面中去，此时我们解决方法只需要将path:’*’路由进行一个删除,将其删除就变可正常访问。

第二动态路由跳转时发生Cannot find module xxx错误。

意思是无法加载我们指定的一个vue文件，这是由于route3.0版本后import方式不支持传入变量，此时我们只需要将其改为require方式便可。

我们此次动态vue项目开发已经基本完成，我的开发的项目是基于element-ui进行，那么如果你需要源码参考。可以私信回复unit便可获取。

vue项目中关于路由的配置

在开发vue项目中，如果将所有路由都写在router.ts中会显得些许繁琐

为了解决这个问题呢，我们可以在每个模板下创建router文件将其抛出，然后在项目下的总router.js将其引入，在更改或者查找路由时会清晰明了

Vue.js 2.0 vue-router怎么设置路由

Vue.js 2.0 vue-router路由器设置方法步骤如下：

1、首先把电源接通，然后插上网线，进线插在wan口，然后跟电脑连接的网线就随便插一个lan口。

2、连接好无线路由器后，在电脑浏览器地址栏输入在路由器IP地址:192.168.1.1。

3、连接后会看到输入相应的登陆用户名：admin，密码：admin。

4、进入操作界面，点击设置向导。

5、进入设置向导的界面，选择进入上网方式设置。

6、点击下一步，进入上网方式设置，可以看到有三种上网方式。如果是拨号的话那么就用PPPoE。动态IP一般电脑直接插上网络就可以用的，上层有DHCP服务器的。静态IP一般是专线什么的，也可能是小区带宽等，上层没有DHCP服务器的，或想要固定IP的。

7、选择PPPOE拨号上网就要填上网帐号和密码。

8、然后点击下一步后进入到的是无线设置，可以看到信道、模式、安全选项、SSID等等，一般SSID就是一个名字，可以随便填，然后模式大多用11bgn.无线安全选项，要选择wpa-psk/wpa2-psk,这样安全，免得轻意让人家破解而蹭网。点击下一步就设置成功。

9、点击完成，路由器会自动重启，届时就完成了路由器设置工作。

Vue-cli-4-路由配置文件，路由进阶，二级路由

vue.config.js    是vue的配置文件，必须创建在 demo根目录 下，该配置文件中，只能使用commonjs模块化语法，使用module.export导出，格式如下图。

@符号代表src资源目录，在vue.config.js文件中将路径解析，path.resolve是拼接路径方法。将@c定义为当前绝对路径

@c代表src目录下的components文件，@v代表src目录下的views文件，其他同理，后续在其他文件中引入文件时，只需要使用以下方法即可导入，不会随着文件目录的改变而改变。

1.路由模式

2.路由元信息

meta属性，配置路由的元信息，其实就是在每个路由身上配置一份数据

3.路由守卫

在meta对象中，可以配置一个roles属性，其中可以配置路由的访问权限，下图中可访问的人已标记为admin，vip及user

其次，在 router.beforeEach 及 router.AfterEach 中可以配置信息

router.beforeEach 是路由前置守卫，每次跳转路由之前，都会拦截，其中next()方法表示下一步（跳转）,其中是一个回调函数，其中有三个参数to,from,next

router.AfterEach是 路由后置守卫，其中可以将页面的title设置为meta属性中设置的title,其中是一个回调函数，其中有两个参数to,from

浏览器的访问权限可以在application中的session storage中添加一个roles：admin，如果路由信息中meta中未设置roles，则无法访问该设置了roles属性的路由页面

安装： npm install nprogress（给路由页面的跳转添加一个上方的进度条）

导入：

首先在页面views中创建一个文件夹，然后在该文件夹中创建两个二级路由页面，如下图所示

然后在所需要创建二级路由的一级路由创建信息中添加一个 children数组 ，该数组中添加二个对象，每个对象就是该一级路由页面的一个二级路由页面，如下图所示，该二级路由信息中的component信息采用了 路由懒加载 的方式导入

然后在一级路由页面one.vue中写入二级路由页面的router-link导航和router-view

最终效果如下图所示

vue下拉菜单配置路由的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue下拉菜单点击触发事件、vue下拉菜单配置路由的信息别忘了在本站进行查找喔。