当前位置：首页 > news >正文

第13篇：Vue Router基础使用

news 来源：原创 2025/6/14 10:27:02

目标：掌握单页面应用（SPA）的路由管理

1. 安装与基本配置

npm install vue-router@4

// router/index.js  
import { createRouter, createWebHistory } from 'vue-router'  

const routes = [  
  { path: '/', component: () => import('@/views/Home.vue') },  
  { path: '/about', component: () => import('@/views/About.vue') }  
]  

const router = createRouter({  
  history: createWebHistory(),  
  routes  
})  

export default router

// main.js  
import { createApp } from 'vue'  
import App from './App.vue'  
import router from './router'  

const app = createApp(App)  
app.use(router)  
app.mount('#app')

2. 路由视图与导航

<!-- App.vue -->  
<template>  
  <!-- 路由导航 -->  
  <nav>  
    <router-link to="/">首页</router-link>  
    <router-link to="/about">关于</router-link>  
  </nav>  

  <!-- 路由出口 -->  
  <router-view></router-view>  
</template>

3. 编程式导航

<script setup>  
import { useRouter } from 'vue-router'  

const router = useRouter()  

// 跳转路径  
const goAbout = () => {  
  router.push('/about')  
}  

// 带参数跳转  
const goUser = (id) => {  
  router.push({  
    path: '/user',  
    query: { userId: id }  
  })  
}  

// 替换当前路由  
router.replace('/login')  

// 前进/后退  
router.go(1)  
router.back()  
</script>

4. 动态路由与参数获取

// 路由配置  
{  
  path: '/user/:id',  
  component: () => import('@/views/User.vue')  
}

<!-- User.vue -->  
<script setup>  
import { useRoute } from 'vue-router'  

const route = useRoute()  
const userId = route.params.id  
const query = route.query  
</script>

5. 导航守卫

// 全局前置守卫  
router.beforeEach((to, from) => {  
  if (to.meta.requiresAuth && !isLoggedIn()) {  
    return '/login'  
  }  
})  

// 路由独享守卫  
{  
  path: '/admin',  
  component: AdminPage,  
  beforeEnter: (to, from) => {  
    // ...  
  }  
}  

// 组件内守卫  
<script setup>  
import { onBeforeRouteLeave } from 'vue-router'  

onBeforeRouteLeave((to, from) => {  
  return confirm('确定离开当前页面吗？')  
})  
</script>

核心要点：