vue script 实现路由
Vue 3 中使用 <script setup> 实现路由
在 Vue 3 项目中，可以通过组合式 API 和 <script setup> 语法糖简洁地实现路由功能。以下是具体实现方式：
安装路由依赖
npm install vue-router@4创建路由实例
在 src/router/index.js 中：
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: () => import('../views/About.vue') }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router在组件中使用路由
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view/>
</div>
</template>
<script setup>
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
// 编程式导航
function navigate() {
router.push('/about')
}
// 获取当前路由信息
console.log(route.path)
</script>路由守卫实现
通过导航守卫可以控制路由的访问权限：
// 全局前置守卫
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login')
} else {
next()
}
})组件内守卫
<script setup>
import { onBeforeRouteLeave } from 'vue-router'
onBeforeRouteLeave((to, from, next) => {
if (hasUnsavedChanges()) {
if (confirm('确定要离开吗？')) next()
} else {
next()
}
})
</script>动态路由匹配
可以通过冒号 : 标记动态路径参数：
const routes = [
{ path: '/user/:id', component: User }
]获取动态参数
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)
</script>路由懒加载
使用动态导入实现路由组件的懒加载：
const routes = [
{
path: '/profile',
component: () => import('../views/Profile.vue')
}
]命名路由和命名视图
可以通过命名方式更灵活地控制路由：
const routes = [
{
path: '/settings',
components: {
default: Settings,
sidebar: SettingsSidebar
}
}
]模板中使用
<router-view name="sidebar"/>
