微头条Router工程代码

微头条Router工程代码

1. 创建工程
   npm creat vite

cd ./工程目录

npm install

npm install vue-router

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

const routes = [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login },
{ path: '/home', component: Home }
]

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

// 简易路由守卫
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token')
console.log("路由守卫")
if (to.path === '/home' && !token) {
next('/login')
} else {
next()
}
})

export default router
3.src/views/Home.vue

4.src/views/Login.vue

5.src/App.vue

6.src/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')