vue 切换id NavigationDuplicated

2024-11-07

解决Vue-router 报NavigationDuplicated的三种方法

控制台会报[NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}].其原因在于Vue-router在3.1之后把$router.push()方法改为了Promise.所以假如没有回调函数,错误信息就会交给全局的路由错误处理,因此就会报上述的错误. vue-router是先报了一个Uncaught (in promise)的错误(因为push没加回调),然后

vue切换样式

在vue中使用事件来切换绑定的class样式,在vue-cli脚手架中的Home.vue中 <template> <div id="main"> <li v-for="v in news"> <span :class="v.status ? 'success' : 'error del'">{{v.title}}</span> <button @click="switch

vue 切换主题（换肤）功能

一:先写好两个css样式放在static文件夹中二:在index.html中添加css link链接 <link rel="stylesheet" id="style" href="static/css/one.css"> 三:在App.vue中的 created中添加默认执行方法 created() { var style = localStorage.getItem("style"); if(style){

VUE通过id从列表页跳转到相对的详情页

新闻列表页面: 在这里我用a标签进行跳转,在vue里面可以这样写<router-link></router-link> 1 <router-link :to="{path:'/news',query:{ id:item.NewsID }}" class="around"></router-link> 新闻详情页: 1)首先要获取id 1 var newsID=this.$route.query.id;6 2)拼接到ur

Vue通过id跳转到商品详情页

首页列表: 在这里我用a标签进行跳转,在vue里面使用<router-link></router-link> <router-link :to="{path:'/news',query:{ id:item.NewsID }}" class="around"></router-link> 商品详情页: //请求接口created: function() { var newsID=this.$route.query.id;

vue切换路由页面内容没有重载

项目中遇到这样一个问题: 在一个地方填了一个申请的表单,需要在另一个页面的列表上显示出来这条申请的数据,但是由于vue的缓存,在切换路由时列表上并没有及时更新数据,解决方法如下: vue路由切换时页面内容没有重新加载关于vue2.0路由开启keep-alive时需要注意的地方把mounted()改成activated()就行了.(activated用于初始化页面数据等)

vue通过ID（参数）修改URL复用同一个页面（组件）不重新加载的问题

项目中经常会用到同一个页面,结构是相同的,我只是在vue-router中通过添加参数的方式来区分状态,参数可以在页面跳转时带上params,或者query,但是有一个问题,即使我们修改了参数,URL也显示已经改变,但页面并不会刷新,因为路由是相同的,vue就会认为你是同一个页面,从而复用已加载的页面,而不会重新加载,所以如果在created钩子中来区分状态明显是行不通的,可以通过watch监听事件来监听路由的变化: watch: { '$route' (to, from) {

vue切换路由模式{hash/history}

vue中常用的路由模式 hash(#):默认路由模式 histroy(/)切换路由模式切换路由模式 export default new Router({ // 路由模式:hash(默认),history模式 mode: 'history', // 修改路由高亮样式,默认值为'router-link-active' linkActiveClass: 'active' //路由规则 routes:[ { path:'/', name:'index', component:'Index' } ],

Vue切换页面时中断axios请求

一.概述在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能,并且可能对现在页面的数据显示造成一定影响所以我们应该,切换页面前中断前面所有请求二.解决方法在main.js中,重新封装axios请求,在router.beforeEach强制中断请求 Vue.prototype.$http= axios; //Vue函数添加一个原型属性$axios 指向axios,这样vu

vue切换按钮（关闭消失型）

弹窗: <div class="pop" v-show="isShow"> <i class="iconfont icon-iconfontweibiaoti1015" v-on:click="hideRules()"></i> <span class="line"></span> <div class="pop-content&q

vue通过id从列表页跳转到对应的详情页

1. 列表页:列表页带id跳转到详情页详情页:把id传回到后台就可以获取到数据了 2.列表页跳转到详情页并更改详情页的标题列表页:带id和页面标题的typeid跳转到详情页详情页:在html绑定标题,获取到传过来的typeid,然后判断typeid是多少对应返回标题. 补充:获取后台的数据,就是去访问的后台的服务器(怎么访问?答:就是你怎么访问网站那样子)然后他有定义到是必须的参数的时候,就是在连接后必须带的参数,才可以获取到后台数据,不是必须的跟在连接后面也不会影响.就如我的第二个例子,

关于vue切换用户，路由表不更新问题

简介我想很多同学在项目中可能会遇到类似的问题,然后一顿操作,发现结果不尽人意.于是查阅各种资料,走进很多坑(可能你阅读的这篇随笔也是个坑).接下来我所描述的是关于我使用不同权限的用户切换登陆后,需要我按下键盘F5刷新浏览器,路由表才会更新的问题以及如何解决. 有关问题的关键词: router.beforeEach() router.addRoutes() whiteList store.getters.token router.options.routes router.matcher res

vue切换路由时动画

安装个包 npm i nprogress 直接导入使用最终的效果就是

03 Vue -课程详细(传参id)、图片显示、推荐课程（主动重定向）

1.CourseDetail 课程详细信息 1.如何传入参数id (1)router中导入 (2) router-link 关联子组件 (3)detail.vue接受id (4)通过id查询详细 2.图片显示 (1)图片路径与效果 (2)v-for循环图片路径 3.ajax请求:点击跳转 (1)后端json数据 (2)ajax请求 (3)效果图 2.推荐课程切换 1. url 跳转了,id没有跳转 detail组件不会重写加载,init不会执行 2.主动重定向:改变url和页面id 3.

VUE 入门笔记

前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下首先我先试了下国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html> <html> <head> <title>VUE 入门</title> <style> body{display:flex;flex-wrap: wrap;align-items:flex-end;} body>div{box-shado

Vue入门笔记#过渡

Vue过渡,可以在元素从DOM中移除,插入时自动调用过渡效果.根据设定,会适时的触发过渡效果. 在使用的目标标签里添加 transition: <div transition="my_transition"></div> https://jsfiddle.net/miloer/n282tqwv/ 它还可以和v-if,v-show,v-for,动态组件一起使用. 官方对Vue过渡过程的讲解: 尝试以 ID "my-transition" 查找

Vue深度学习（5）-过渡效果

简介通过 Vue.js 的过渡系统,你可以轻松的为 DOM 节点被插入/移除的过程添加过渡动画效果.Vue 将会在适当的时机添加/移除 CSS 类名来触发 CSS3 过渡/动画效果,你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作. 以 v-transition="my-transition 这个指令为例,当带有这个指令的 DOM 节点被插入或移除时,Vue 将会: 1.用 my-transition这个 ID 去查找是否有注册过的 JavaScript

Vue.js 2.x笔记：基本语法（2）

1. Vue实例及选项 1.1 创建Vue实例(new Vue instance) 每个Vue Application必须创建一个root Vue Instance. <script> var vm = new Vue({ }); </script> 一个Vue实例相当于一个MVVM模式中的ViewModel.在创建Vue实例时,可以传入一个选项对象,包含数据.模板.挂载元素.方法.生命周期钩子等选项. Vue.js通过构造函数Vue{ option }创建一个Vue实例: var

后端开发者的Vue学习之路（四）

目录上节内容回顾: npm 介绍安装常用命令: 补充: 基于npm的Hello World 项目结构分析用法迁移小提醒 ES6语法知识补充单文件组件使用注意: 路由开启路由定义路由使用路由数据显示路由跳转带参路由动态路径参数查询参数监听路由参数变化嵌套路由命名视图编程式路由 404路由补充: vuex 开启vuex并创建store 使用vuex 获取数据改变数据项目结构补充: 首发日期:2019-01-28 修改: 2019-01-29:增加404

后端开发者的Vue学习之路（一）

目录前言: iview组件库示例 element组件库示例 Vue的介绍兼容性: 学习Vue需要的前置知识: MVVM模型补充: 安装/导入导入Vue 安装两种方式的区别: HelloWorld示例代码分析: 代码效果: 实例中可以定义的内容定义数据定义方法methods 生命周期与生命周期钩子函数补充: 渲染插入文本 v-text v-html 用v-bind绑定属性: v-bind的简写把对象的所有属性绑定到元素: 条件渲染循环计算属性与函数的区别与侦听属性的区

vue入门知识点

最近入坑vue 做一点小的记录有不对的辛苦指出会第一时间更改上新 0.利用vue-cli构建项目新建一个目标文件夹 ,全局安装vue-cli脚手架工具 (全局安装一次即可) npm install -g vue-cli 然后cd 目标文件夹地址 vue init webpack 一个文件名(初始化项目会在这个文件夹下) demo 接下来会出现一系列 webpack的节本配置选择项目名,项目描述,作者,vue build ,是否安装路由,然后是2个代码检查的内容,不需要直接 no,两个测试

vue 切换id NavigationDuplicated

热门专题