El reloj en vue en realidad se usa para monitorear los cambios de datos en la instancia de vue.
escuchar cadena
<template>
<div @click="stringClick">{
{msg}}</div>
</template>
<script>
export default {
name: "jianting",
data() {
return {
msg: "1223"
};
},
watch: {
msg: function(newVal, oldVal) {
console.log("newVal:", newVal, "oldVal:", oldVal) // 新值，旧值
}
},
methods: {
stringClick() {
this.msg = Math.random() * 100;
}
}
};
</script>
objeto de escucha
<template>
<div @click="click">
<div>
姓名：{
{obj.name}}，
年龄：{
{obj.age}}，
他的儿女有：
</div>
<div
v-for="(item, index) in obj.children"
:key="index">
姓名：{
{item.name}}，
年龄：{
{item.age}}
</div>
</div>
</template>
<script>
export default {
name: "jianting",
data() {
return {
obj: {
name: "Tony",
age: 50,
children: [
{
name: "小明",
age: 12
},
{
name: "小花",
age: 5
}
]
}
};
},
watch: {
obj: {
handler: function(newVal, oldVal) {
console.log("newVal:", newVal);
console.log("oldVal:", oldVal);
},
deep: true, // 深度监听
immediate: true // 立即执行
},
// 监听对象中的某个值
"obj.name": function(newVal, oldVal) {
console.log("newVal obj.name:", newVal);
console.log("oldVal obj.name:", oldVal);
}
},
methods: {
click() {
this.obj.name = "未知";
}
}
};
</script>
Cuando el reloj escucha un objeto, debe agregar profundo: verdadero. Solo de esta manera puede profundizar en la capa inferior para monitorear en tiempo real. Si no lo agrega, el objeto no puede ser monitoreado en busca de cambios. Cuando Se agrega inmediato, se llamará inmediatamente después del inicio de la escucha.
escuchar ruta
Escuche a través del reloj y ejecute cuando cambie la ruta
方法一监听以及路由
监听一级路由：路由组件的渲染区域为router-view，
作为顶层出口，它将匹配到的路由组件渲染在该区域中，
路由组件渲染默认的方式是销毁 - 创建，
因此$watch是监听不到一级路由的变化的。
所以，要想使用$router监听一级路由，需要让组件成为复用组件，
也就是使用keep-alive包裹router-view。
<keep-alive>
<router-view />
</keep-alive>
watch: {
$route: {
handler: function(to, from) {
console.log(to，'新'，from, '旧');
if(from && (from.name === 'adoptSelect')){
this.active = 2
}
},
// 深度观察监听
deep: true,
immediate: true
}
}
方法二 监听子路由：
需要在有子路由的情况下，才能在当前组件监听到子组件的路由变化，直接使用下面的方式即可。
watch：{
$route(to, from){
console.log('去哪里',to, '从哪里来',from)
console.log(to.path)
}
}
或者
watch: {
'$route.path': function (newVal, oldVal) {
if (newVal === '/login') {
console.log('欢迎进入登录页面');
}
if (newVal === '/register') {
console.log('欢迎进入注册页面');
}
}
}
方法三
watch: {
'$route' : 'getPath' // 获取路径
},
methods: {
getPath(){
console.log( this .$route.path);
}
}
tecla - utilizada para evitar la "reutilización"
Vue nos brinda una forma de declarar "estos dos elementos son completamente independientes, no los reutilice". Simplemente agregue una propiedad clave con un valor único (vue docs original)
<router-view :key= "key" ></router-view>
computed: { //计算属性
key() {
return this .$route.name !== undefined
?
this .$route.name + new Date()
:
this .$route + new Date()
}
}
使用computed属性和Date()可以保证每一次的key都是不同的，
这样就可以如愿刷新数据了。
ruta de escucha global
(a través de la función de enlace de vue-router
beforeRouteEnter
/beforeRouteUpdate
/beforeRouteLeave)
Este método generalmente se usa cuando se agrega verificación de salto en el enrutador.
方法一 监听路由导航守卫
watch:{
$route(to,from){
if (to.path == '/' || to.path == '/Prisoner' || to.path == '/Goods' || to.path == '/Time' || to.path == '/Mine' ){
/**
* $store来自Store对象
* dispatch 向 actions 发起请求
*/
this .$store.dispatch( 'showTabBar' );
} else {
this .$store.dispatch( 'hideTabBar' );
}
}
},
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当钩子执行前，组件实例还没被创建
if(from.name !== 'adoptDetail'){
next({
path:'/adopt'
})
}else{
next()
}
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
},
方法二：
在app.vue的create中加入下面代码，然后进行判断
this.$router.beforeEach((to ,from,next) =>{
console.log(to);
next();
})
等等方法