引入 VRouter的步骤·创建路由配置·配置命名视图在路由配置中使用属性定义多个视图
一、引入 Vue Router 的步骤
要在 Vue 3 项目中使用 Vue Router,首先需要安装它。
1. 安装 Vue Router
你可以通过 npm 或 yarn 来安装 Vue Router。
npm install vue-router@4
2. 创建路由配置
在项目的 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: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
3. 在主应用中引入路由
在 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')
二、页面跳转的方法
1. 使用组件
Vue Router 提供了组件,可以用来声明式地进行导航。
<router-link to="/about">Go to About</router-link>
2. 使用编程式导航
你还可以通过编程方式进行导航。
router.push('/about')
三、路由守卫
Vue Router 提供了多种路由守卫机制来控制页面跳转的行为。
1. 全局前置守卫
在 router/index.js 中添加全局前置守卫。
router.beforeEach((to, from, next) => {
// ...
})
2. 路由独享守卫
在路由配置中,可以为特定路由添加守卫。
const routes = [
{
path: '/about',
name: 'About',
component: About,
beforeEnter: (to, from, next) => {
// ...
}
}
]
四、动态路由匹配
Vue Router 支持动态路由匹配。
1. 定义动态路由
在你的路由配置中,使用冒号定义动态参数。
const routes = [
{
path: '/user/:id',
name: 'User',
component: User
}
]
2. 访问动态参数
在组件中,可以通过访问动态参数。
console.log(this.$route.params.id)
五、命名视图
Vue Router 支持命名视图,可以在同一个页面中渲染多个视图。
1. 配置命名视图
在路由配置中,使用属性定义多个视图。
const router = createRouter({
// ...
views: {
main: Home,
footer: Footer
}
})
2. 使用命名视图
在模板中,使用渲染相应的视图。
<router-view name="main"></router-view>
<router-view name="footer"></router-view>
六、路由懒加载
Vue Router 支持路由懒加载,即按需加载路由组件。
1. 配置懒加载路由
在路由配置中,使用函数实现懒加载。
const routes = [
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
}
]
引入 Vue Router 是实现 Vue 3 页面跳转的关键步骤。通过安装和配置 Vue Router,你可以在不同的页面组件之间切换,并使用声明式和编程式导航、路由守卫、动态路由匹配、命名视图和路由懒加载等功能来优化你的应用。