引入 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,你可以在不同的页面组件之间切换,并使用声明式和编程式导航、路由守卫、动态路由匹配、命名视图和路由懒加载等功能来优化你的应用。