vue路由实现步骤
安装Vue Router
在项目中安装Vue Router依赖包，使用npm或yarn进行安装：
npm install vue-router
# 或
yarn add vue-router引入并配置路由
在项目的入口文件（通常是main.js或main.ts）中引入Vue Router并配置路由规则：
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})
const app = createApp(App)
app.use(router)
app.mount('#app')创建路由组件
在views或pages目录下创建路由对应的组件文件，例如Home.vue和About.vue：
<!-- Home.vue -->
<template>
<div>Home Page</div>
</template>
<!-- About.vue -->
<template>
<div>About Page</div>
</template>添加路由视图
在根组件App.vue中添加<router-view>标签作为路由内容的渲染出口：
<template>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>路由导航
使用<router-link>组件实现声明式导航，或通过编程式导航跳转：
<template>
<button @click="goToAbout">Go to About</button>
</template>
<script>
export default {
methods: {
goToAbout() {
this.$router.push('/about')
}
}
}
</script>动态路由匹配
通过冒号:定义动态路径参数，在组件中通过$route.params访问：
// 路由配置
{ path: '/user/:id', component: User }
// 组件内获取
this.$route.params.id嵌套路由
使用children属性配置嵌套路由，父路由组件中需要包含<router-view>：
{
path: '/parent',
component: Parent,
children: [
{ path: 'child', component: Child }
]
}路由守卫
通过全局或路由独享的守卫控制导航：
router.beforeEach((to, from, next) => {
// 验证逻辑
next()
})
// 路由独享守卫
{
path: '/admin',
component: Admin,
beforeEnter: (to, from, next) => {
// 验证逻辑
next()
}
}路由懒加载
使用动态导入实现路由组件的懒加载，优化性能：
{
path: '/lazy',
component: () => import('./views/Lazy.vue')
}
