vue实现登录路由
实现登录路由的基本步骤
安装Vue Router依赖，确保项目已初始化并安装了Vue.js。通过npm或yarn添加Vue Router：
npm install vue-router在项目中创建路由配置文件（通常为router/index.js），引入Vue和Vue Router，并定义路由规则：
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
const routes = [
{
path: '/login',
name: 'Login',
component: Login
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router创建登录组件
在views或components目录下创建登录组件（如Login.vue），包含表单和提交逻辑：
<template>
<div>
<form @submit.prevent="handleLogin">
<input v-model="username" placeholder="用户名" />
<input v-model="password" type="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
handleLogin() {
// 验证逻辑和API调用
this.$router.push('/dashboard') // 登录成功后跳转
}
}
}
</script>配置全局路由守卫
在router/index.js中添加导航守卫，实现登录状态验证和重定向：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token') // 假设用token验证
if (to.name !== 'Login' && !isAuthenticated) {
next({ name: 'Login' }) // 未登录跳转到登录页
} else {
next()
}
})集成路由到主应用
在main.js中导入并挂载路由实例：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')添加路由视图和导航
在App.vue中放置<router-view>显示路由组件，并可添加导航链接：
<template>
<div>
<router-link to="/login">登录</router-link>
<router-view></router-view>
</div>
</template>可选：路由懒加载
优化性能时，可使用懒加载动态导入登录组件：
const routes = [
{
path: '/login',
name: 'Login',
component: () => import('../views/Login.vue')
}
]
