安裝Vue Router：使用npm install vue-router@4 為Vue 3 項目安裝對應版本。 2. 定義路由：在src/router/index.js 中配置路徑與組件的映射。 3. 集成路由：在main.js 中通過createApp(App).use(router) 將路由掛載到應用實例。 4. 添加導航與出口：在App.vue 中使用<router-link> 進行導航，並用 顯示對應組件。最終實現單頁應用的無刷新視圖切換，完整支持動態(tài)路由、嵌套路由、懶加載和路由守衛(wèi)等高級功能。

Setting up routing in a Vue application is essential when building single-page applications (SPAs) with multiple views. Here's how to do it step by step using Vue Router , the official routing library for Vue.

? 1. Install Vue Router

First, make sure you have a Vue project (using Vue 3 is recommended). Then install vue-router via npm or yarn:

 npm install vue-router@4

Note: For Vue 3, use Vue Router v4. If you're using Vue 2, install vue-router@3 .

? 2. Define Your Routes

Create a router directory in your project (eg, src/router/ ) and add an index.js file:

 // src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

const routes = [
  { path: '/', component: HomeView },
  { path: '/about', component: AboutView }
]

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

export default router

Make sure the components (like HomeView.vue , AboutView.vue ) exist in the src/views/ folder or adjust the paths accordingly.

? 3. Integrate Router into Your App

Import and use the router in your main application file ( main.js or main.ts ):

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

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

This connects the router to your Vue app instance.

? 4. Add Navigation and Route Outlet

In your App.vue , use <router-link> for navigation and <router-view /> as the outlet where routed components are rendered:

 <!-- App.vue -->
<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>

  <router-view />
</template>

<style>
/* Active link styling */
.router-link-exact-active {
  font-weight: bold;
  color: blue;
}
</style>

Now clicking on the links will change the view without a page reload.

? Extra Tips

• Dynamic Routes : Use params like /user/:id in your route path and access them via useRoute() composable.
• Nested Routes : Define children in route config for nested UIs.
• Lazy Loading : Improve performance by code-splitting:

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

• Route Guards : Use beforeEach for authentication checks:

 router.beforeEach((to, from, next) => {
  if (to.path === '/secret' && !isAuthenticated) {
    next('/')
  } else {
    next()
  }
})

That's it! You now have a working routing setup in your Vue app. With Vue Router, you can scale from simple navigation to complex route logic.

以上是如何在VUE應用程序中設置路由？的詳細內容。更多資訊請關注PHP中文網其他相關文章！