vue路由的watch对象以及v-once的问题

实现的需求是在文章主页时,不显示后退的按钮。进入文章列表时显示后退按钮,我的设想是通过一个canShow的状态变量来进行控制,首先是使用路由。一开始在组件中调用router的导航钩子beforeRouteEnter,但是没有任何效果。这就很奇怪。接着思考我的路由。文章页面是/article/list。而进入详情页则是/article/detail/:id,继续往下看文档会发现。作者其实已经讲了这个问题,原文如下:

提醒一下,当使用路由参数时,例如从 /user/foo 导航到 user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch(监测变化) $route 对象:

原来如此,好吧。我们就用到作者提到的watch对象。这下果然就可以了。canShow能正常的在true和false之间切换了。但是问题又来了。。

为啥按钮还是不能正常的显示和隐藏。。。我去。然后再找我写的代码。发现多了一个v-once指令。好吧。之前为了缓存下来用了这个指令。看来用了这个指令之后页面加载完毕之后就不会再改变了。去掉v-once指令。ok。搞定。特此记录

时间: 2024-08-06 03:39:31

vue路由的watch对象以及v-once的问题的相关文章

初印象至Vue路由

初印象系列为快速了解一门技术的内容,后续会推出本人应用这门技术时发现的一些认识. Vue路由和传统路由的区别: Vue路由主要是用来实现单页面应用内各个组件之间的切换,同样支持传递参数等功能.而传统路由使用超链接 以下内容来自官网,js使用ES6 如何在vue项目中使用vue-router HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="htt

Vue - 路由传递参数

Vue 2.0  路由传递参数 Vue 路由传递参数 有两种方式: 一.用name传递参数 两步完成用name传值并显示在模板里: 在路由文件src/router/index.js里配置name属性. 1 2 3 4 5 6 7 routes: [ { path: '/', name: 'Hello', component: Hello } ] 模板里(src/App.vue)用$router.name的形势接收,比如直接在模板中显示: 1 <p>{{ $route.name}}</p&

Vue.js—组件快速入门以及Vue路由实例应用

上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js的组件,组件其实就是页面组成的一部分,它是一个具有独立的逻辑和功能或页面,组件可以扩展 HTML 元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树,如下图: 接下来我们就仔细讲讲组件的使用吧. 1 全局组件 以下就是我们注册

(转)一个vue路由参数传递的注意点

首先我的路由的定义 { path: '/b', name: 'B', component: resolve => require(['../pages/B.vue'], resolve) } 我从A组件跳转到B组件,并通过路由信息对象传递一些参数 this.$router.push({ path: '/b', params: { paramA: 'a' }, query:{ paramB: 'b' } }) 在B组件中获取参数 this.$route.query.paramB //b this.

14.vue路由&amp;脚手架

一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash", base:"基本路径" 加一些前缀 必须在history模式下有效 linkActiveClass:"active", 范围选择 linkExactActiveClass:"exact", 精确选择 routes:[ {path,componen

vue路由获取路由参数

vue路由设置路由参数有2种方式: 1.通过query配置: <router-link :to="{ name:'login',query:{id:1} }">登录</router-link> 通过query配置的路径显示如下: 2.通过params配置: <router-link :to="{ name:'register',params:{'name':'San'} }">注册</router-link> 通过qu

Vue路由传递参数详细说明

前言:最近我跟同事在做一个BI系统,采用前后端分离.整个系统包括数据分析系统.运营支持.系统设置等多个子系统.数据分析系统其实就是做各种数据报表.数据统计.实时数据的系统,这里面其实整个页面就是一个模板,最上面是filter.第二级是统计图.最下面是table数据.所以在数据分析子系统中,只要配置一个路由就可以匹配所有页面,在系统中,我把这个为公用路由.至于公用路由权限如何鉴定其实很简单:获取到用户权限列表后,渲染出所有的权限菜单,但注意每次跳转时一定要进行权限校验,具体原因自行思考.说着有点跑

Vue路由-命名视图实现经典布局

Vue路由-命名视图实现经典布局 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="

vue路由原理

Vue路由原理 目前实现路由的方式有两中,vue通过参数mode来设置,默认是hash模式. 利用URL中的hash('#')来实现 利用History interface在HTML5中新增的方法 history对应的是HTML5History对象,hash对应的是HashHistory对象,abstract对应的是AbstractHistory对象.在初始化对应的history之前,会对mode做一些校验:若浏览器不支持HTML5History方式(通过supportsPushState遍历判