vue-router路由 和 路由守卫的基本使用
最新回答
夜见树
2021-01-12 16:43:30
Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。以下是 Vue Router 路由配置 和 路由守卫 的基本使用方法，基于您提供的代码示例进行详细说明：
一、Vue Router 路由配置1. 安装与基础配置通过 Vue CLI 安装路由后，在 router/index.js 中进行配置：
import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue' // 导入组件Vue.use(VueRouter) // 挂载路由const routes = [ { path: '/', redirect: '/home' // 默认重定向到首页 }, { path: '/home', name: 'Home', component: Home, meta: { title: '首页' } // 元信息（可用于路由守卫） }, { path: '/about', name: 'About', component: () => import('../views/About.vue') // 懒加载组件 }]const router = new VueRouter({ mode: 'history', // 使用 HTML5 History 模式（无 #） base: process.env.BASE_URL, // 基础路径 routes // 注入路由配置})export default router2. 关键配置说明- routes 数组：定义路径与组件的映射关系。
path：URL 路径。
component：直接导入或懒加载（推荐 () => import()）。
meta：自定义元信息（如页面标题）。
- mode: 'history'：去除 URL 中的 #，需服务器支持（如 Nginx 配置）。
- redirect：重定向规则。
路由守卫用于控制路由跳转时的逻辑（如权限验证、动态标题等）。
1. 全局前置守卫（beforeEach）在 router/index.js 中添加：
router.beforeEach((to, from, next) => { console.log('路由守卫触发', to.path) // 动态修改页面标题 if (to.meta.title) { document.title = to.meta.title } next() // 必须调用，否则路由中断})- 参数：
to：目标路由对象。
from：来源路由对象。
next：必须调用的钩子函数（next() 放行，next(false) 中断）。
- 常见用途：
修改页面标题（如示例）。
用户登录验证（未登录跳转到登录页）。
权限控制（无权限跳转到 403 页面）。
- 全局解析守卫：router.beforeResolve（在导航确认前调用）。
- 全局后置钩子：router.afterEach（无 next 参数，用于分析、埋点等）。
- 路由独享守卫：在路由配置中直接定义 beforeEnter。
- 组件内守卫：在组件内定义 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。
- <router-link>：导航组件，to 属性指定路径。
- <router-view>：路由出口，动态渲染匹配的组件。
- 动态路由：通过 : 定义参数（如 path: '/user/:id'）。
- 懒加载：使用 () => import() 分割代码，减少初始加载体积。
- 路由跳转后页面未更新：
检查 next() 是否被调用。
确保 router-view 在模板中存在。
- History 模式 404：
服务器需配置 fallback 到 index.html（如 Nginx 的 try_files）。
- 动态标题不生效：
确保目标路由配置了 meta.title。
通过以上配置，您可以实现基本的路由跳转、懒加载和全局守卫功能。根据实际需求，可进一步扩展嵌套路由、命名视图等高级特性。
热门标签
