Vue.js利用vue-router实现登录与注册组件之间的切换,并为各个组件添加mounted和beforeDestroy钩子函数
时间: 2023-06-12 16:05:37 浏览: 47
首先,在Vue.js的入口文件中,需要引入vue-router,并在Vue实例中注入:
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/register',
name: 'register',
component: Register
}
]
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
```
在上述代码中,我们定义了两个路由,分别对应登录和注册组件。
接下来,在登录和注册组件中,我们可以添加mounted和beforeDestroy钩子函数,用于在组件挂载和销毁时执行一些操作。
```javascript
<template>
<div>
<!-- login form -->
</div>
</template>
<script>
export default {
name: 'Login',
mounted() {
console.log('Login component mounted')
},
beforeDestroy() {
console.log('Login component destroyed')
}
}
</script>
```
```javascript
<template>
<div>
<!-- register form -->
</div>
</template>
<script>
export default {
name: 'Register',
mounted() {
console.log('Register component mounted')
},
beforeDestroy() {
console.log('Register component destroyed')
}
}
</script>
```
以上代码中,我们在组件的mounted钩子函数中输出了一条日志,表示组件已经挂载。在组件的beforeDestroy钩子函数中,我们也输出了一条日志,表示组件即将被销毁。
这样,我们就可以利用vue-router实现登录和注册组件之间的切换,并为各个组件添加mounted和beforeDestroy钩子函数。