vue实现路由控制
Vue 路由控制实现方法
在 Vue 项目中，路由控制通常通过 Vue Router 实现。以下是几种常见的路由控制方式：
安装与基础配置
确保项目中已安装 Vue Router。若未安装，可通过以下命令安装：
npm install vue-router在 src/router/index.js 中初始化路由：
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{ path: '/', name: 'Home', component: Home },
{ path: '/about', name: 'About', component: () => import('../views/About.vue') }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router路由守卫控制权限
通过全局前置守卫 beforeEach 实现权限控制：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})在路由配置中定义元信息：
const routes = [
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true }
}
]动态路由加载
根据用户权限动态添加路由：
const adminRoutes = [
{ path: '/admin', component: AdminPanel }
]
router.addRoute(adminRoutes)路由懒加载
通过动态导入实现组件懒加载：
const routes = [
{
path: '/settings',
component: () => import('../views/Settings.vue')
}
]嵌套路由配置
实现多级路由嵌套：
const routes = [
{
path: '/user',
component: UserLayout,
children: [
{ path: 'profile', component: Profile },
{ path: 'posts', component: UserPosts }
]
}
]编程式导航
在组件中通过代码控制路由跳转：
// 字符串路径
this.$router.push('/home')
// 带查询参数
this.$router.push({ path: '/search', query: { q: 'vue' } })
// 命名路由
this.$router.push({ name: 'user', params: { id: 123 } })路由传参方式
通过 props 解耦路由参数：
const routes = [
{
path: '/user/:id',
component: User,
props: true // 将路由参数作为 props 传递
}
]在组件中接收：
export default {
props: ['id']
}404 路由处理
捕获未匹配的路由：
const routes = [
{ path: '/:pathMatch(.*)*', component: NotFound }
]滚动行为控制
自定义路由切换时的滚动位置：
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { top: 0 }
}
}
})
