利用vue-router实现登录与注册组件之间的切换,并为各个组件添加mounted和beforeDestroy钩子函数
时间: 2023-06-12 20:05:46 浏览: 63
首先,我们需要在Vue项目中安装vue-router:
```
npm install vue-router --save
```
然后,在`main.js`文件中引入并使用vue-router:
```js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Login from './components/Login.vue'
import Register from './components/Register.vue'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/login', component: Login },
{ path: '/register', component: Register }
]
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')
```
在上述代码中,我们定义了两个路由,分别是`/login`和`/register`,对应的组件是`Login`和`Register`。
接下来,我们在`App.vue`中添加路由组件的占位符:
```html
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
```
现在,我们就可以在`Login.vue`和`Register.vue`组件中添加`mounted`和`beforeDestroy`钩子函数了:
```js
export default {
name: 'Login',
mounted() {
console.log('Login mounted')
},
beforeDestroy() {
console.log('Login beforeDestroy')
}
}
```
```js
export default {
name: 'Register',
mounted() {
console.log('Register mounted')
},
beforeDestroy() {
console.log('Register beforeDestroy')
}
}
```
这样,当我们从`/login`切换到`/register`时,会分别触发`Login`组件的`beforeDestroy`钩子函数和`Register`组件的`mounted`钩子函数;而当我们从`/register`切换回`/login`时,会分别触发`Register`组件的`beforeDestroy`钩子函数和`Login`组件的`mounted`钩子函数。