微头条练习

微头条练习:
1.App.vue

2.router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../Login.vue'
import Home from '../Home.vue'

// 权限守卫
const authGuard = (to, from, next) => {
const token = localStorage.getItem('token')
if (token) {
next()
} else {
// 没token强制跳登录
if(to.path === '/login') next()
else next('/login')
}
}

const routes = [
{
path: '/',
redirect: '/home' // 根路径跳首页，但首页需要token
},
{
path: '/login',
component: Login
},
{
path: '/home',
component: Home,
beforeEnter: authGuard
}
]

const router = createRouter({
history: createWebHistory(),
routes
})

export default router

3.Home.vue

4.Login.vue

5.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')