Vue--watch控制监听路由地址-组件的变化----'$route.path': function (newVal, oldVal)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src="./lib/vue-2.4.0.js"></script>

<!-- 1. 导入包 -->

<script src="./lib/vue-router-3.0.1.js"></script>

</head>

<body>

<div id="app">

<router-link to="/login">登录</router-link>

<router-link to="/register">注册</router-link>

<!-- 容器 -->

<router-view></router-view>

</div>

<script>

// 2. 创建子组件

var login = {

template: ‘<h3>这是登录子组件,这个组件是 奔波霸 开发的。</h3>‘

}

var register = {

template: ‘<h3>这是注册子组件,这个组件是 霸波奔 开发的。</h3>‘

}

// 3. 创建一个路由对象

var router = new VueRouter({

routes: [ // 路由规则数组

{ path: ‘/‘, redirect: ‘/login‘ },

{ path: ‘/login‘, component: login },

{ path: ‘/register‘, component: register }

],

linkActiveClass: ‘myactive‘ // 和激活相关的类

})

// 创建 Vue 实例,得到 ViewModel

var vm = new Vue({

el: ‘#app‘,

data: {},

methods: {},

// router: router

router,

watch: {

//  this.$route.path

‘$route.path‘: function (newVal, oldVal) {

// console.log(newVal + ‘ --- ‘ + oldVal)

if (newVal === ‘/login‘) {

console.log(‘欢迎进入登录页面‘)

} else if (newVal === ‘/register‘) {

console.log(‘欢迎进入注册页面‘)

}

}

}

});

</script>

</body>

</html>

Vue--watch控制监听路由地址-组件的变化----'$route.path': function (newVal, oldVal)

原文地址:https://www.cnblogs.com/fdxjava/p/11617789.html

时间: 2024-10-03 03:44:17

Vue--watch控制监听路由地址-组件的变化----'$route.path': function (newVal, oldVal)的相关文章

vue页面内监听路由变化

beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 `this` // 因为当钩子执行前,组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变,但是该组件被复用时调用 // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候, // 由于会渲染同样的 Foo 组件,因此组

Vue系列之 =&gt; Watch监视路由地址改变

第一种方式实现监听 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 7 <meta http-equiv="Conten

名称案例-使用keyup事件实现1 和 名称案例-使用watch监听文本框数据的变化2

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script></head><body><div id="app"> <in

vue 监听路由变化

方法一:通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或 // 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal){ console.log(val); }, // 深度观察监听 deep: true } }, 或 // 监听,当路由发生变化的时候执行 watch: { '$route':'getPath

mint ui的tabBar监听路由变化实现tabBar切换

说明 最近学习vue,使用了mint ui的tabBar,感觉好难受,结合 tab-container使用更难受,因为它不是根据路由来切换页面的.mui与它基本相反,因此它能根据搜索栏的路由变化,相应的tabBar高亮显示,而mint ui就不能,要加点代码实现了. mint ui tabBar标签栏 //页面 和 数据 <template> <div id="main"> <mt-tabbar v-model="selected"&g

ionic 监听路由事件 验证登录

.run(['$rootScope', '$location' , '$state', '$http','$ionicPopup', function($rootScope, $location, $state,$http,$ionicPopup){ var loginname=['tab.member','loan','repayment','iftab.exe']; $http.jsonp(apiurl+"/home/appapi/isLogin?callback=JSON_CALLBACK

Angular 监听路由变化事件

摘要: $stateChangeStart- 当模板开始解析之前触发 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ ... }) app.run(['$rootScope', '$location' ,'$cookieStore', '$state', 'CacheManager', function($rootScope, $location, $co

Angular 监听路由变化

var app = angular.module('Mywind',['ui.router']) //Angular 监听路由变化 function run($ionicPlatform, $location, Service, $rootScope, $stateParams) { //路由监听事件 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { co

关于vue中滚动监听失效问题

在vue项目中, 监听window滚动失效;并且document.body.scrollTop一直是0的情况! 查找了许多资料;并没有找到合理的解决方案; 最中发现,在index.html设置了html,body的宽高设置成了100%; 这样会造成window.onscroll监听不到正确的滚出高度(恒为0); 不和你们多bb:解决方案: 将html,body的height设置为auto;即可解决!!