在vue-router中配合ElementUI如何实现导航

下面我就为大家分享一篇vue-router配合ElementUI实现导航的实例，具有很好的参考价值，希望对大家有所帮助。

在每个项目中路由是不可或缺的，最近学习vue-router和ElementUI配合使用实现导航栏，在学习的过程中遇到一个问题：点击浏览器的刷新之后页面停留在原来的位置，但是导航却是默认第一个。

由于接触前端时间不长，对于路由的概念不是特别清楚，按照文档写了之后完全不知道怎么下手了，请教了同事，同事的解决办法是利用vuex管理，但是vuex这块还没有接触过，所以这个问题就一直搁置了，今天周末自己在家学习偶然直到了可以使用$routepath设置默认选中的导航，但是设置之后没有什么效果，刷新时页面依旧停留在原来位置，导航却一个都没有选中，查了半天资料也没有找到答案，后来和网上的一个例子进行对比，发现

default-active="$routepath"前面还需要添加绑定符号，如下：

:default-active="$routepath"如此设置之后就可以实现导航和页面同时变化了。

导航的完整代码请看这里：

<template>

<p id="app">

<el-col :span="4">

<el-menu :default-active="$routepath" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"

theme="dark"

router>

<el-menu-item index="/upload_img">上传</el-menu-item>

<el-menu-item index="/upload_video">视频上传</el-menu-item>

<el-menu-item index="/https">网络请求</el-menu-item>

<el-menu-item index="/other">其他</el-menu-item>

</el-menu>

</el-col>

<router-view></router-view>

</p>

</template>上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vuejs中详细解读this$emit的使用方法

在vue中如何实现密码显示隐藏切换功能

在Vue中如何使用父组件调用子组件事件

路由标记，标记当前网络节点的状态。

其中R是relay的首字母，说明是迭代路由，会根据路由下一跳的IP地址获取出接口。配置静态路由时如果你只指定下一跳IP地址，而不指定出接口，那么就是迭代路由，需要根据下一跳IP地址的路由获取出接口。

D是download的首字母，表示该路由下发到FIB表。

扩展资料：

作用

route命令用于显示和操作IP路由表。要实现两个不同的子网之间的通信，需要一台连接两个网络的路由器，或者同时位于两个网络的网关来实现。

在Linux系统中，设置路由通常是为了解决以下问题：该Linux系统在一个局域网中，局域网中有一个网关，能够让机器访问Internet，那么就需要将这台机器的IP地址设置为 Linux机器的默认路由。要注意的是，直接在命令行下执行route命令来添加路由，不会永久保存，当网卡重启或者机器重启之后，该路由就失效了；要想永久保存，可以保存到配置文件。

linux 默认只支持一条默认路由，当重新启动网口时，会把其他默认路由去掉，只剩下一条该网口生成的默认路由。当然可以通过 route 命令手动添加多条默认路由，如果多条路由一样，则选择最开始找到的路由(排在前面的路由)。

希望大家喜欢。 首先你的机器需要有两块网卡，分别接到两台交换机上, internet地址：19216818，子网掩码：2552552550，网关：19216811 内部网地址：1722318，子网掩码：2552552550，网关：1722311 如果按正常的设置方法设置每块网卡的ip地址和网关，再cmd下使用route print查看时会看到 Network Destination Netmask Gateway Interface Metric 0000 0000 19216811 19216818 0000 0000 1722311 1722318 即指向0000的有两个网关，这样就会出现路由冲突，两个网络都不能访问。 如何实现同时访问两个网络？那要用到route命令 第一步：route delete 0000 "删除所有0000的路由" 第二步：route add 0000 mask 0000 19216811 "添加0000网络路由"这个是主要的,意思就是你可以上外网 第三步：route add 1722300 mask 255000 1722311 "添加1722300网络路由"，注意mask为255000 ，而不是2552552550 ，这样内部的多网段才可用。 这时就可以同时访问两个网络了，但碰到一个问题，使用上述命令添加的路由在系统重新启动后会自动丢失，怎样保存现有的路由表呢？ route add -p 添加静态路由，即重启后，路由不会丢失。注意使用前要在tcp/ip设置里去掉接在企业内部网的网卡的网关 ------------------------------------------------------------------------------------------------ 一些单位将内网和外网分开了。痛苦啊，偶单位就是如此。boss当然是基于安全性考虑了，可是没有笔记本的怎么办？又要办公，有得上网。没办法，发扬DIY精神偷偷装一块网卡，让聊天与工作同在。让你的主机内外兼顾。这是我在网上找到的，谢谢作者了。方法如下： 1设置其中接internet的网卡的网关为10001，启用后就是默认网关 --注：这是对应外网的网卡，按照你们单位外网的ip分配情况，在TCP/IP属性中配置好 ip、掩码、DNS 2将连接单位内部网的网卡IP配好后，设网关设置为空（即不设网关），启用后，此时内网无法通过网关路由 3进入CMD，运行：route -p add 192000 mask 255000 19216801 metric 1 --注：意思是将192的IP包的路由网关设为19216801 ，-P 参数代表永久写入路由表，建议先不加此参数，实践通过后在写上去 4 OK！同时启用两个网卡，两个网关可以同时起作用了，两个子网也可以同时访问了，关机重启后也不用重设！ 其实这是个中折的办法。。。。使大家的双网卡同时运行，很不错的方法。大家学习一下吧。。

路由配置：

页面：

路由地址，采用query传参方式：参数1=XXX&参数2=XXX

params参数

query参数

插播传送门=>>>Vue Router 的params和query传参的使用和区别（详尽）

$router返回的是当前项目中的路由器对象。

$route返回的是当前路由信息。

vueconfigjs 是一个可选的配置文件，如果项目的 (和 packagejson 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

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

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

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