前端vue3后台管理系统模板

编程导航的第一个项目OJ

＃ 大三浅谈vuerouter https://router.vuejs.org/zh/guide/ 1）组件： <RouterView /> <RouterLink to="/about">Go to About</RouterLink> 本质上是普通的vue组件 动态路由事例 import User from './User.vue' // 这些都会传递给 `createRouter` const routes = [ // 动态字段以冒号开始 { path: '/users/:id', component: User }, ] 路由配置 url后缀 route.params 单个参数 /users/:username /users/eduardo { username: 'eduardo' } 多个参数/users/:username/:postId /users/eduardo/123 { username: 'eduardo', postId: '123' } <template> <div> <!-- 当前路由可以通过 $route 在模板中访问 --> User {{ $route.params.id }} </div> </template> 动态路由参数监测 <script setup> import { watch } from 'vue' import { useRoute } from 'vue-router' const route = useRoute() watch(() => route.params.id, (newId, oldId) => { // 对路由变化做出响应... }) </script> 任意参数参考高级匹配 router 框架给的方法集全 1.push(跳转，不刷新页面跳转，更新routerview) vue2 this.$router.push(...) vue3 router.push(.......) // 字符串路径 router.push('/users/eduardo') // 带有路径的对象 router.push({ path: '/users/eduardo' }) // 命名的路由，并加上参数，让路由建立 url router.push({ name: 'user', params: { username: 'eduardo' } }) // 带查询参数，结果是 /register?plan=private router.push({ path: '/register', query: { plan: 'private' } }) // 带 hash，结果是 /about#team router.push({ path: '/about', hash: '#team' }) const username = 'eduardo' // 我们可以手动建立 url，但我们必须自己处理编码 router.push(`/user/${username}`) // -> /user/eduardo // 同样 router.push({ path: `/user/${username}` }) // -> /user/eduardo // 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益 router.push({ name: 'user', params: { username } }) // -> /user/eduardo // `params` 不能与 `path` 一起使用 router.push({ path: '/user', params: { username } }) // -> /user 2全局前置守卫 router.beforeEach 用途路由权限验证 const router = createRouter({ ... }) router.beforeEach((to, from) => { // ... // 返回 false 以取消导航 return false }) router.beforeEach(async (to, from，next) => { if ( // 检查用户是否已登录 !isAuthenticated && // ❗️ 避免无限重定向 to.name !== 'Login' ) { // 将用户重定向到登录页面 return { name: 'Login' } ‖ return '/login' || next({ name: 'Login' }) || ”next(〞Login〞) } }) 3.全局后置钩子 router.afterEach((to, from) => { sendToAnalytics(to.fullPath) }) 它们对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。 4.路由独享的守卫 进入路由触发，权限校验的一种方式 const routes = [ { path: '/users/:id', component: UserDetails, beforeEnter: (to, from) => { // reject the navigation return false }, }, ] 路由元信息 const routes = [ { path: '/posts', component: PostsLayout, children: [ { path: 'new', component: PostsNew, // 只有经过身份验证的用户才能创建帖子 meta: { requiresAuth: true }, }, { path: ':id', component: PostsDetail // 任何人都可以阅读文章 meta: { requiresAuth: false }, } ] } 路由参数需要监测 组件路由数据获取 import { useRoute } from 'vue-router' import { getPost } from './api.js' const route = useRoute() 常用组合式api <script setup> import { useRouter, useRoute } from 'vue-router' const router = useRouter() const route = useRoute() function pushWithQuery(query) { router.push({ name: 'search', query: { ...route.query, ...query, }, }) } </script> <script setup> import { useRoute } from 'vue-router' import { ref, watch } from 'vue' const route = useRoute() const userData = ref() // 当参数更改时获取用户信息 watch( () => route.params.id, async newId => { userData.value = await fetchUser(newId) } ) </script>