侦听器---监听路由的变化
<div class="container">
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div> <template id="login">
<h2>登录</h2>
</template> <template id="register">
<h2>注册</h2>
</template>
</div>
// 创建两个组件
let login = {
template: '#login'
}
let register = {
template: '#register'
}
// 创建路由对象
let router = new VueRouter({
routes: [{
path: '/',
redirect: '/login'
}, {
path: '/login',
component: login
}, {
path: '/register',
component: register
}]
})
var vm = new Vue({
el: '#app',
data: {},
// 使用路由
router,
//侦听器---监听路由的变化
watch: {
'$route.path': function (newVal, oldVal) {
if (newVal == '/login') {
console.log('登录页面');
}
if (newVal == '/register') {
console.log('注册页面');
}
}
}
})
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果