什么是Vue Router？-安装完成后-在main.js文件中引入并使用我们定义的路由

什么是Vue Router？

Vue Router是Vue.js官方的路由管理器，它的主要作用是帮助开发者轻松实现单页面应用（SPA）的路由功能。

安装 Vue Router

首先，你需要安装Vue Router。你可以使用npm或yarn来安装：

npm install vue-router

yarn add vue-router

安装完成后，你需要在你的Vue项目中引入Vue Router。

创建路由组件

接下来，你需要创建一些Vue组件，这些组件将用于你的路由。假设你有两个组件：Home 和 About。

配置路由

创建完组件后，你需要配置路由。首先，在项目的src目录下创建一个名为router的文件夹，并在其中创建一个index.js文件。

// router/index.js



import Vue from 'vue'



import Router from 'vue-router'



import Home from '@/components/Home'



import About from '@/components/About'







Vue.use(Router)







export default new Router({



  routes: [



    {



      path: '/',



      name: 'home',



      component: Home



    },



    {



      path: '/about',



      name: 'about',



      component: About



    }



  ]



})

在主应用中使用路由

最后一步是在主应用中使用配置好的路由。在main.js文件中引入并使用我们定义的路由。

// main.js



import Vue from 'vue'



import App from './App.vue'



import router from './router'







new Vue({



  el: 'app',



  router,



  components: { App },



  template: ''



})

在App.vue文件中，使用router-view组件来显示当前路由对应的组件。

现在，当你访问根路径时，会显示Home组件的内容，当你访问/about路径时，会显示About组件的内容。

动态路由匹配

Vue Router支持动态路由匹配。比如，如果你想显示用户详情页，你可以这样配置：

// router/index.js



{



  path: '/user/:id',



  name: 'user',



  component: User



}

在User组件中，你可以通过$route.params.id获取传递的参数。

嵌套路由

在实际应用中，你可能需要嵌套路由。比如，一个用户页面下有多个子页面：

// router/index.js



{



  path: '/user/:id',



  name: 'user',



  component: User,



  children: [



    {



      path: 'profile',



      name: 'user-profile',



      component: UserProfile



    },



    {



      path: 'posts',



      name: 'user-posts',



      component: UserPosts



    }



  ]



}

在User组件中，使用router-view显示嵌套的子路由组件。

导航守卫

Vue Router提供了导航守卫功能，可以在路由进入或离开时执行一些操作。比如，进行权限验证或记录用户行为。

// router/index.js



router.beforeEach((to, from, next) => {



  if (to.path === '/login' && !isAuthenticated()) {



    next({ path: '/' })



  } else {



    next()



  }



})

路由懒加载

为了优化应用性能，可以使用路由懒加载。懒加载可以在需要时才加载对应的组件，而不是在应用初始化时一次性加载所有组件。

// router/index.js



const User = () => import('@/components/User')

你可以实现Vue Router的基本功能，并了解如何配置动态路由、嵌套路由、导航守卫和路由懒加载。Vue Router的强大功能可以帮助你轻松管理应用中的路由，提高开发效率和用户体验。