vue3 路由怎么使用,有二级路由,且重定向到二级路由
时间: 2024-09-24 17:17:17 浏览: 27
Vue3 中,使用 Vue Router 进行路由管理是很常见的。首先你需要安装 `vue-router` 包,然后在项目结构中设置路由配置。以下是基本的步骤:
1. 安装依赖:
```bash
npm install @vue/router --save
```
2. 导入并创建路由器实例:
```javascript
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: '/',
name: '首页',
component: HomeComponent,
},
{
path: '/about',
name: '关于',
component: AboutComponent,
// 如果需要二级路由,可以嵌套另一个数组
children: [
{
path: '',
name: '二级路由1',
component: SecondLevelRoute1,
},
{
path: 'route2',
name: '二级路由2',
component: SecondLevelRoute2,
}
]
}
];
const router = createRouter({
history: createWebHistory(), // 使用浏览器的历史记录功能
routes
});
```
3. 配置导航守卫:
为了处理路由之间的跳转和重定向,你可以使用 `beforeEach` 或其他导航守卫,比如重定向到二级路由:
```javascript
router.beforeEach((to, from, next) => {
if (to.path === '/' && to.name !== '二级路由1') {
// 如果从首页试图进入,且不是二级路由1,重定向到二级路由1
next('/about');
} else {
next(); // 其他情况直接通过
}
});
```
4. 使用 `router-view` 组件显示当前路由的内容:
在 App.vue 或者布局组件中添加 `<router-view>`,它会动态渲染对应的组件。