<!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>
Comparison between watch, ~computed and methods
1. The result of the computed attribute will be cached and will not be recalculated unless the dependent responsive attribute changes. Mainly used as attributes;
2. The 'methods method represents a specific operation and mainly writes business logic;
3.'watch is an object, the key is the expression to be observed, and the value is the corresponding callback function. It is mainly used to monitor changes in certain specific data to perform certain specific business logic operations; it can be regarded as a combination of computed and methods;