vue实现路由导航
路由导航的实现方式
在Vue中，路由导航主要通过Vue Router实现。Vue Router是Vue.js官方的路由管理器，用于构建单页面应用（SPA）。
基本路由配置
安装Vue Router后，在项目中创建路由实例并配置路由规则：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = new VueRouter({
routes
})
export default router声明式导航
使用<router-link>组件创建导航链接：
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>编程式导航
通过this.$router在组件方法中进行导航：
methods: {
goToAbout() {
this.$router.push('/about')
},
goBack() {
this.$router.go(-1)
}
}路由传参
通过params或query传递参数：
// 传递参数
this.$router.push({ path: '/user', query: { id: '123' } })
// 接收参数
this.$route.query.id动态路由匹配
定义动态路径参数：
const routes = [
{ path: '/user/:id', component: User }
]在组件中访问参数：
this.$route.params.id导航守卫
使用导航守卫控制路由跳转：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})路由懒加载
优化性能，按需加载路由组件：
const User = () => import('./views/User.vue')
const routes = [
{ path: '/user', component: User }
]命名路由和命名视图
使用命名路由简化导航：
const routes = [
{
path: '/settings',
name: 'settings',
component: Settings
}
]
// 导航时
this.$router.push({ name: 'settings' })使用命名视图创建复杂布局：
<router-view name="header"></router-view>
<router-view></router-view>
<router-view name="footer"></router-view>
