用vue实现routerview案例
安装 Vue Router
确保项目已安装 Vue 和 Vue Router。若未安装，可通过以下命令安装：
npm install vue-router配置路由文件
创建路由配置文件（如 src/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;挂载路由到 Vue 实例
在 src/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');使用 <router-view> 组件
在根组件（如 src/App.vue）中放置 <router-view>，作为路由内容的出口：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>导航跳转示例
在页面中添加导航链接，使用 <router-link> 组件：
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</div>
</template>动态路由与参数传递
定义动态路由时，可通过 : 标记参数：
// router/index.js
{ path: '/user/:id', component: User }在目标组件中通过 useRoute 获取参数：
import { useRoute } from 'vue-router';
export default {
setup() {
const route = useRoute();
console.log(route.params.id);
}
};嵌套路由配置
在父路由的 children 属性中定义嵌套路由：
{
path: '/parent',
component: Parent,
children: [
{ path: 'child', component: Child }
]
}父组件中需再次使用 <router-view> 作为嵌套内容出口：
<!-- Parent.vue -->
<template>
<div>
<h2>Parent</h2>
<router-view></router-view>
</div>
</template>路由守卫示例
通过 router.beforeEach 实现全局前置守卫：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth) {
// 验证逻辑
} else {
next();
}
});代码格式化说明
- 路由配置需遵循 Vue Router 的 API 设计。
- 组件文件建议放在
src/views/目录下。 - 动态参数需通过
route.params访问。 - 嵌套路由的路径无需以
/开头。
