vue 实现router-view
Vue Router 的基本用法
在 Vue.js 中使用 router-view 需要先安装并配置 Vue Router。以下是实现步骤：
安装 Vue Router：
npm install vue-router在项目中创建路由配置文件（通常为 router/index.js）：
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router在主应用中使用路由
在 main.js 或 main.ts 中导入并使用路由：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')在组件中使用 router-view
在 App.vue 或布局组件中添加 router-view：
<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>路由嵌套的实现
可以通过 children 属性实现嵌套路由：
const routes = [
{
path: '/user',
component: UserLayout,
children: [
{ path: 'profile', component: UserProfile },
{ path: 'posts', component: UserPosts }
]
}
]在父组件模板中添加嵌套的 router-view：
<template>
<div class="user">
<h2>User</h2>
<router-view></router-view>
</div>
</template>命名视图的使用
Vue Router 支持多个命名视图：
const routes = [
{
path: '/',
components: {
default: Home,
sidebar: Sidebar,
footer: Footer
}
}
]在模板中指定视图名称：
<template>
<div>
<router-view></router-view>
<router-view name="sidebar"></router-view>
<router-view name="footer"></router-view>
</div>
</template>路由过渡效果
可以为 router-view 添加过渡动画：
<template>
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</template>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>路由守卫的应用
可以在路由配置中添加导航守卫：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login')
} else {
next()
}
})动态路由的实现
使用参数实现动态路由匹配：
const routes = [
{ path: '/user/:id', component: User }
]在组件中访问路由参数：
<template>
<div>User ID: {{ $route.params.id }}</div>
</template>或使用组合式 API：
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)
