汽车宣传网站模板,赣州网站推广公司,上海的网站建设公司哪家好,接单网app下载安装前端Vue日常工作中–Vue路由相关 文章目录 前端Vue日常工作中--Vue路由相关1.路由模式2.router和$route3.路由跳转4.路由守卫5.路由传参6.问题#xff1a;Vue路由解决页面刷新参数丢失的问题 1.路由模式
Vue 路由模式主要有两种#xff1a;哈希模式#xff08;Hash ModeVue路由解决页面刷新参数丢失的问题 1.路由模式
Vue 路由模式主要有两种哈希模式Hash Mode和历史模式History Mode。 哈希模式Hash Mode 在哈希模式下URL 中的路径会以 # 符号开头在这种模式下实际的路径是在 # 符号之后而不会触发浏览器向服务器发送请求。这样可以避免浏览器刷新页面时发送请求适用于单页应用。 在 Vue 中默认就是哈希模式你不需要额外的配置只需创建一个路由实例即可 import Vue from vue;
import VueRouter from vue-router;Vue.use(VueRouter);const router new VueRouter({mode: hash, // 默认就是 hash 模式routes: [// 路由配置]
});历史模式History Mode 在历史模式下URL 中的路径更具传统的形式不再带有 # 符号在这种模式下需要服务器的支持以确保在直接访问或刷新页面时能够正确处理路由。 若要使用历史模式需要配置 mode 为 history并在服务器端进行相关设置。以下是一个基本的配置示例 import Vue from vue;
import VueRouter from vue-router;Vue.use(VueRouter);const router new VueRouter({mode: history, // 使用 history 模式routes: [// 路由配置]
});在 Element UI可以在项目中使用 Element UI 的导航组件如 el-menu 和 el-menu-item并根据不同的路由模式进行相应的配置。例如可以在菜单项中使用 router-link 组件来实现导航
templateel-menu :default-activeactiveMenu modehorizontal selecthandleMenuSelectel-menu-item index/homerouter-link to/homeHome/router-link/el-menu-itemel-menu-item index/aboutrouter-link to/aboutAbout/router-link/el-menu-item/el-menu
/templatescript
export default {data() {return {activeMenu: // 用于记录当前激活的菜单项};},methods: {handleMenuSelect(index) {this.activeMenu index;}}
}
/scriptrouter-link 组件被用于创建带有正确路由的链接这样用户点击菜单项时就会触发路由切换。在实际项目中可以根据具体需求配置路由模式并使用 Element UI 或其他 UI 库提供的组件来构建用户界面。
2.router和$route
$router 和 $route 是与路由相关的两个对象它们分别代表了路由器和当前路由的信息。主要区别如下 $router $router 是 Vue 路由器的实例提供了一系列导航方法如 push、replace 和 go用于在应用程序中进行路由导航。$router 允许你通过编程的方式进行路由跳转而不依赖于声明式的组件内部导航例如 router-link。可以在任何组件中通过 this.$router 访问。 $route $route 是当前活动的路由对象包含了当前路由的信息如路径、参数、查询参数、哈希等。$route 可以用于访问当前路由的各种信息例如在组件内获取当前路径 this.$route.path或者获取查询参数 this.$route.query。$route 是一个响应式对象当路由发生变化时相关组件会自动更新。
templatedivp当前: {{ $route.path }}/pp查询参数: {{ $route.query }}/pel-button clickgoToAboutGo to About/el-button/div
/templatescript
export default {methods: {goToAbout() {// 使用 $router 进行编程式导航this.$router.push(/about);}}
}
/script$route.path 用于获取当前路由的路径$route.query 用于获取查询参数。$router.push(/about) 使用 $router 对象进行编程式导航将用户导航到 “/about” 路由。
3.路由跳转
在 Vue 中常见的路由跳转方式包括 声明式导航Declarative Routing 使用 router-link 组件进行声明式的导航该组件会自动渲染为合适的 a 标签通过 to 属性指定目标路由。 templaterouter-link to/homeGo to Home/router-link
/template编程式导航Programmatic Routing 使用 $router 对象进行编程式导航通常在组件内部的方法中执行。在这里可以使用 this.$router.push() 来导航到目标路由。 script
export default {methods: {goToHome() {this.$router.push(/home);}}
}
/scripttemplatediv!-- 声明式导航 --router-link to/homeel-button typeprimaryGo to Home/el-button/router-link!-- 编程式导航 --el-button typesuccess clickgoToAboutGo to About/el-button/div
/templatescript
export default {methods: {goToAbout() {// 使用编程式导航this.$router.push(/about);}}
}
/script我们使用了 Element UI 的按钮组件来触发路由的跳转。router-link 用于声明式导航而 this.$router.push() 用于编程式导航。
4.路由守卫
Vue 路由守卫用于在导航过程中对路由进行控制可以在路由跳转前、跳转后、组件渲染前等不同阶段执行一些代码逻辑。Vue 提供了全局守卫、路由独享守卫、组件内守卫等多种类型的守卫。 全局前置守卫 (beforeEach) 在路由跳转前执行常用于进行权限验证或全局设置。 import router from ./router;router.beforeEach((to, from, next) {// 在此处进行权限验证或其他逻辑if (to.meta.requiresAuth !isAuthenticated) {// 未登录重定向到登录页next(/login);} else {// 继续路由跳转next();}
});全局解析守卫 (beforeResolve) 在导航被确认之前同时在所有组件内守卫和异步路由组件被解析之后调用。 router.beforeResolve((to, from, next) {// 在此处执行解析逻辑next();
});全局后置守卫 (afterEach) 在路由跳转后执行常用于记录日志或进行页面埋点等操作。 router.afterEach((to, from) {// 在此处执行后置逻辑
});路由独享守卫 (beforeEnter) 在单个路由配置中定义对特定路由生效。 const router new VueRouter({routes: [{path: /admin,component: Admin,beforeEnter: (to, from, next) {// 在此处执行路由独享守卫逻辑if (isAdmin) {next();} else {next(/login);}}}]
});组件内守卫 在组件内部定义 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 方法。 export default {beforeRouteEnter(to, from, next) {// 在组件渲染前执行next(vm {// 可以访问实例 vm});},beforeRouteUpdate(to, from, next) {// 在组件复用时调用// 可以访问组件实例 thisnext();},beforeRouteLeave(to, from, next) {// 在组件离开时调用// 可以访问组件实例 thisnext();}
};router.beforeEach((to, from, next) {if (to.meta.requiresAuth !isAuthenticated) {// 使用 Element UI 的消息框提示用户this.$message.error(请先登录);// 未登录重定向到登录页next(/login);} else {// 继续路由跳转next();}
});5.路由传参 路由参数 通过在路由路径中添加参数可以使用$route.params来访问这些参数。 // 路由配置
const routes [{ path: /user/:id, component: User }
];// 组件中获取参数
this.$route.params.idElement UI !-- 使用el-link传递参数 --
el-link :to{ path: /user/ userId }Go to User/el-link查询参数 使用查询参数可以通过$route.query来获取。 // 路由配置
const routes [{ path: /user, component: User }
];// 组件中获取参数
this.$route.query.idElement UI !-- 使用el-link传递查询参数 --
el-link :to{ path: /user, query: { id: userId }}Go to User/el-link命名路由 使用命名路由可以在$route.params中直接获取。 // 路由配置
const routes [{ path: /user/:id, name: user, component: User }
];// 组件中获取参数
this.$route.params.idElement UI !-- 使用el-link传递参数 --
el-link :to{ name: user, params: { id: userId }}Go to User/el-linkprops传参 可以通过在路由配置中使用props来直接将参数传递给组件。 // 路由配置
const routes [{ path: /user/:id, component: User, props: true }
];// 组件中通过props接收参数
props: [id]Element UI !-- 使用el-link传递参数 --
el-link :to{ path: /user/ userId, props: true }Go to User/el-link6.问题Vue路由解决页面刷新参数丢失的问题
当在Vue应用中刷新页面时页面的状态和参数通常会丢失这是因为刷新页面会重新加载整个应用导致 Vue 实例重新创建。 使用路由参数 将页面状态信息放在路由的路径中以便在刷新页面时能够重新获取。这样即使刷新页面路由参数仍然会被保留。 // 路由配置
const routes [{ path: /user/:id, component: User }
];// 在组件中获取参数
this.$route.params.idElement UI 的 el-link !-- 使用el-link传递参数 --
el-link :to{ path: /user/ userId }Go to User/el-link使用localStorage或sessionStorage 将页面状态信息存储在 localStorage 或 sessionStorage 中以便在页面刷新时检索。 // 存储数据
localStorage.setItem(userId, userId);// 获取数据
const userId localStorage.getItem(userId);在 Vue 组件的生命周期钩子中使用 mounted() {const userId localStorage.getItem(userId);// 使用 userId 进行其他操作
}使用 localStorage 或 sessionStorage 存储的数据在页面关闭后仍然存在需要手动清除或者通过其他方式进行管理。 使用Vuex 如果应用状态较为复杂可以使用 Vuex 来管理全局状态。即使页面刷新Vuex 中的状态仍然可以被保留。 // 在 Vuex store 中定义状态
state: {userId: null
}// 在组件中获取状态
this.$store.state.userId在页面刷新后你需要通过触发某个事件或在应用初始化时从其他地方恢复这些状态。
