路由
提示
路由是前端系统的核心,没有路由系统将无法运行。所以,前端开发有必要完全掌握路由使用和定义。
静态路由
- 静态路由在
src/router/webRouter.js
中定义 - 后台首页的静态路由在
src/router/homePageRoutes.js
中定义 - 静态路由不受动态权限控制(除硬编码外),主要适用于公共页面,并且不需要权限控制的功能。
... // 其他路由
{
name: "test", // 路由名称(标识符) 唯一
path: "/test", // 路由地址,浏览器访问的地址,要唯一
meta: {
title: "标题", // 路由标题,显示在浏览器标题栏
icon : "图标", // 路由图标
},
component: () => import('@/views/test/index.vue'), // 路由绑定的页面组件地址
}
... // 其他路由
动态路由
提示
动态路由需要在菜单管理添加与修改,是跟 用户
、角色
等功能息息相关,并且动态路由受权限动态控制。
与静态路由不同的是,动态路由表完全存放在后台数据库,每次刷新页面都会从后台请求当前登录用户的路由列表,Vue通过分析路由结构给动态添加到路由器里
路由使用
在开发中经常会用到页面跳转、或者获取当前页面信息等需求,那么有必要掌握路由方面的一些操作
获取当前路由信息
使用 useRoute()
获取当前路由的API,可通过此API获取当前路由的信息,比如 path、name、query 等参数。
更多信息可以参考 vue-router
的setup语法使用文档
import { useRoute } from 'vue-router'
const route = useRoute()
Vue页面路由跳转
使用 useRouter()
API可操作路由的跳转,更多使用方式,可参考 vue-router
的文档
import { useRouter } from 'vue-router'
const router = useRouter()
// 直接输入要跳转的路由
router.push('/login')
// 指定路由的 name 跳转
router.push({ name: 'login' })
// 指定路由的 path 跳转
router.push({ path: '/login' })
// 带上参数跳转
router.push({ name: 'login', query: { id: 1, name: '张三' } })