Vue Router 是 Vue.js 官方提供的路由管理器，它使得单页面应用 (SPA) 的开发变得更加简单和高效。通过本文，你将了解到 Vue Router 的核心功能和使用方法，包括定义路由、动态路由、导航守卫和嵌套路由等。我们还会通过具体的代码案例，让你更好地理解和应用这些知识。
安装 Vue Router
首先，我们需要安装 Vue Router。只需在项目中运行以下命令：
npm install vue-router
定义路由
在 Vue 项目中，我们需要一个专门的文件来定义路由。例如，我们可以创建一个 router.js 文件，并在其中定义应用的路由。
// router.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
在 Vue 应用中使用路由
接下来，我们需要在 Vue 应用中使用刚刚定义的路由。在 main.js 文件中导入并使用路由。
// 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')
创建路由组件
为了让路由生效，我们还需要创建相应的组件。例如，创建 Home.vue 和 About.vue 组件。
<!-- Home.vue -->
<template>
<div>
<h1>Home Page</h1>
<p>Welcome to the home page!</p>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
<!-- About.vue -->
<template>
<div>
<h1>About Page</h1>
<p>This is the about page.</p>
</div>
</template>
<script>
export default {
name: 'About'
}
</script>
在模板中使用路由
在 App.vue 中，我们可以使用 <router-link> 来创建导航链接，并使用 <router-view> 来显示匹配的组件。
<!-- App.vue -->
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
nav {
display: flex;
gap: 10px;
}
</style>
动态路由和路由参数
Vue Router 支持动态路由和路由参数，允许我们在路径中使用动态部分。
定义动态路由
在 router.js 中，我们可以定义带参数的动态路由。
// router.js
import User from './components/User.vue'
const routes = [
// ...other routes
{ path: '/user/:id', component: User }
]
获取路由参数
在 User.vue 组件中，我们可以通过 useRoute 钩子获取路由参数。
<!-- User.vue -->
<template>
<div>
<h1>User Page</h1>
<p>User ID: {{ userId }}</p>
</div>
</template>
<script>
import { useRoute } from 'vue-router'
export default {
name: 'User',
setup() {
const route = useRoute()
const userId = route.params.id
return { userId }
}
}
</script>
导航守卫
导航守卫允许我们在路由切换前后执行特定的代码逻辑。
全局导航守卫
在 router.js 中，我们可以设置全局导航守卫。
// router.js
router.beforeEach((to, from, next) => {
console.log('Navigating from', from.path, 'to', to.path)
next() // 必须调用 next()，否则导航不会进行
})
嵌套路由
Vue Router 支持嵌套路由，允许我们创建多层级的路由结构。
定义嵌套路由
在 router.js 中，我们可以定义嵌套路由。
// router.js
import UserProfile from './components/UserProfile.vue'
import UserPosts from './components/UserPosts.vue'
const routes = [
{
path: '/user/:id',
component: User,
children: [
{ path: 'profile', component: UserProfile },
{ path: 'posts', component: UserPosts }
]
}
]
使用嵌套路由
在 User.vue 中，我们可以使用 <router-view> 来显示嵌套路由。
<!-- User.vue -->
<template>
<div>
<h1>User Page</h1>
<p>User ID: {{ userId }}</p>
<router-link :to="'/user/' + userId + '/profile'">Profile</router-link>
<router-link :to="'/user/' + userId + '/posts'">Posts</router-link>
<router-view></router-view>
</div>
</template>
<script>
import { useRoute } from 'vue-router'
export default {
name: 'User',
setup() {
const route = useRoute()
const userId = route.params.id
return { userId }
}
}
</script>
通过以上介绍，你可以初步了解 Vue Router 的一些关键知识点和使用方法。这些内容能帮助你在 Vue.js 项目中实现复杂的路由导航逻辑。希望你在使用 Vue Router 时能够得心应手，畅行无阻！
