vue-cli脚手架使用饿了吗插件的导航菜单无法实现路由跳转

使用饿了吗ui组件的导航菜单,在加上router属性之后无法实现index的路由跳转,点击无效且不报错

经过排查发现问题出现在路由的配置上面

代码如下:

const router = new vueRouter({
    mode:"history",
    routes:[
        {path:‘/index‘,component:Index,children:[
            {path:‘/users‘,component:Users},
        ]},
        {path:‘/login‘,component:Login},
        // {path:‘*‘,redirect:‘/index‘},
    ]
})

在路由规则里面使用了mode:"history",的属性,为了去掉vue-router自带的  # 号,使路径更加简洁,

但同时也加上了访问错误地址时的自动跳转代码

// {path:‘*‘,redirect:‘/index‘},

这个时候就出现了bug

当点击饿了吗ui组件的导航菜单时,浏览器会寻找  /users 的地址,但在vue-router里默认的地址应该是  ‘ / # / users ‘,所以浏览器会认为没有找到地址,将 / users 认为是错误地址自带跳转到

/ index 的首页面,在视觉上相当于没有进行跳转,实际上该页面进行了两次跳转,第一次跳  / users 发现没找到 ,第二次 跳回 ‘ /index ‘ 的默认地址

造成了该bug的出现,该bug没有任何报错提示,属于一种逻辑上的错误。

原文地址:https://www.cnblogs.com/BR-Tao/p/11359148.html

时间: 2024-08-06 03:14:44

vue-cli脚手架使用饿了吗插件的导航菜单无法实现路由跳转的相关文章

vue.cli脚手架初次使用图文教程

vue.cli脚手架初次使用图文教程 我之前的环境是安装了node.js, 我记得曾经好像安装过vue ,不过现在又要重新开始学习起来了.在youtube上看了一vue的相关教程,还是需要实操的. 好像安装过npm -v 发现已经安装了5.6.0 需要安装然后使用 cnpm 安装 vue-cli 和 webpack 安装代码:npm install -g vue-cli 一.生成项目 首先需要在命令行中进入到项目目录,然后输入: vue init webpack vue-testone p.p1

web前端 -- vue -- vue cli脚手架

搭建 vue-cli 脚手架 1. 依赖的环境是:node.js 1.1.检测node和npm版本 node.js 官网下载页,选择 windows 系统 msi 安装版本,一路 next 安装. 要有6.9以上的node:node-v 要有3.10以上的npm:npm -v 附:安装node.js 1.2. 安装全局 vue cli Linux下使用命令:sudo npm install --global vue-cli windows下:npm install --global vue-cl

vue cli 脚手架上多页面开发 支持webpack2.x

A yuri demo for webpack2 vue multiple page.我看到有一些项目多页面项目是基于webapck1.0的,我这个是在webpack2.x上布置修改. 项目地址: https://github.com/yurizhang/vue_multiple_page   直接拉下来看代码就好,没几行修改. 主要修改:几个文件即可 ,主要是node.js代码,使用beyond file compare比较一下即可. 项目地址: https://github.com/yuri

vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。

废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子 项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.env.js 我们需要做配置的就是第一个和第三个. 其实这两个文件内容就是针对生产环境和发布环境设置不同的参数的文件,那么打开dev.en.js,开发环境.原本代码如下: 'use strict' const merge = require('webpack-merge') const prodEnv

用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 6.10.3 的版本,相对稳定. 2.使用 npm 管理依赖 使用 node 自带的包管理工具 npm 管理项目中的依赖,由于 npm 的服务器在国外.经常会遇到速度奇慢或者下载不下来依赖的情况,所以推荐使用淘宝镜像. npm install-g cnpm--registry=https://reg

更新到@vue/cli 4.1.1版本的前端开发前的准备

一.概念简述 1.node.js目的是提供一个JS的运行环境. 2.npm(node package manager)是一个JS包管理器. 二.检查自己的电脑是否已安装相关配置 1.查看node.js 2.查看npm或cnpm 这里我是用了淘宝的cnpm镜像 3.查看vue版本 可以查看vue内置命令 有ui这个命令方可使用vue ui进入UI界面的项目初始化. 三.通过配置达到上述的配置结果 首先,去node.js官网下载最新版的node.js,下载好根据提示安装完毕即可. 其次,npm是随着

在vue cli 3脚手架里引入tinymce 5富文本编辑器

本文主要讲的是在Vue cli 3脚手架搭建的项目里如何引用Tinymce 5富文本编辑器. 请注意识别"版本号",不同版本的配置细节有所不同. 1. tinymce的安装 1. 安装tinymce-vue npm install @tinymce/tinymce-vue -S 2. 安装tinymce npm install tinymce -S 3. 下载中文语言包 tinymce提供的语言包很多,选择下载中文语言包 2. 使用方法 1. 文件操作 在项目根目录的public目录下

vue/cli 3.0 脚手架【进阶】

安装vue-cli3   npm install -g @vue/cli 创建项目 vue-cli-test 脚手架-项目-成功-运行项目 基于vue-cli配置移动端自适应 转自:http://hjingren.cn/2017/06/16/%E5%9F%BA%E4%BA%8Evue-cli%E9%85%8D%E7%BD%AE%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94/ 配置 flexible 安装 lib-flexible  

npm 在安装 Vue脚手架命令(npm install -g @vue/cli)时报错安装报错--“Unexpected end of JSON input while parsing near···”

在安装Vue的脚手架(npm install -g @vue/cli 项目名称)时,提示: Unexpected end of JSON input while parsing near 其实,但凡使用npm 时,只要提示这个,都可以按照以下几种方式进行尝试. 第一种:删掉package.lock.json 第二种:清除cache npm cache clean --force第三种:进入下面这个文件夹,把文件夹npm-cache下的内容删除掉(清除cache) 路径:C:/Users/DELL