Vue 路由

admin 管理员组

文章数量: 887609

一、什么是 Vue 路由？

Vue 路由（Vue Router）是 Vue.js 的官方路由管理器。它允许我们在单页应用中实现不同页面之间的导航，而无需刷新整个页面。通过定义路由配置，我们可以将不同的 URL 路径映射到特定的组件，从而实现页面的切换和动态内容的展示。

二、安装和配置 Vue 路由

       1. 安装 Vue Router
        在使用 Vue Router 之前，我们需要先安装它。可以通过以下命令使用 npm 进行安装：

​
     npm install vue-router

​

        2.创建路由实例
        在 Vue 项目中，我们需要创建一个路由实例来管理应用的路由。在项目的入口文件（通常是 main.js）中，可以这样创建路由实例：

     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,
     });

     new Vue({
       router,
       render: h => h(App),
     }).$mount('#app');

• 在上面的代码中，我们首先导入了 Vue、VueRouter 和两个视图组件 Home 和 About。然后，我们使用 Vue.use(VueRouter) 安装路由插件。接下来，我们定义了一个路由配置数组 routes，其中每个对象代表一个路由，包含 path（路径）和 component（组件）属性。最后，我们创建了一个路由实例 router，并将其传递给 Vue 实例。
  
  3.在组件中使用路由
  • 在 Vue 组件中，我们可以使用 <router-link> 和 <router-view> 两个标签来实现路由导航和页面展示。
  • <router-link> 标签用于创建一个链接，点击该链接会导航到指定的路由。例如：

     <template>
       <div>
         <router-link to="/">Home</router-link>
         <router-link to="/about">About</router-link>
       </div>
     </template>

• <router-view> 标签用于显示当前路由对应的组件。例如：

     <template>
       <div>
         <router-view></router-view>
       </div>
     </template>

三、路由参数和查询参数

1. 路由参数
   • 路由参数允许我们在 URL 中传递动态的值，以便在不同的页面之间传递数据。例如，我们可以定义一个路由 /user/:id，其中 :id 是一个路由参数，表示用户的 ID。在组件中，我们可以通过 $route.params.id 来获取路由参数的值。
   • 以下是一个示例代码:

          const routes = [
            { path: '/user/:id', component: User },
          ];
     
          const User = {
            template: '<div>User ID: {{ $route.params.id }}</div>',
          };
     

2. 查询参数
   • 以下是一个示例代码：
   • 查询参数是在 URL 末尾以 ? 开头的键值对，可以用于传递额外的信息。在组件中，我们可以通过 $route.query 来获取查询参数的值。

     const routes = [
       { path: '/search', component: Search },
     ];

     const Search = {
       template: '<div>Search Query: {{ $route.query.q }}</div>',
     };

四、嵌套路由

嵌套路由允许我们在一个父路由下定义多个子路由，从而实现更复杂的页面结构。例如，我们可以在一个 /dashboard 路由下定义多个子路由，如 /dashboard/users、/dashboard/orders 等。

以下是一个嵌套路由的示例代码：

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      { path: 'users', component: Users },
      { path: 'orders', component: Orders },
    ],
  },
];

const Dashboard = {
  template: '<div><router-view></router-view></div>',
};

const Users = {
  template: '<div>Users Page</div>',
};

const Orders = {
  template: '<div>Orders Page</div>',
};

在上面的代码中，我们定义了一个 /dashboard 路由，它有两个子路由 /dashboard/users 和 /dashboard/orders。当访问 /dashboard 路径时，会显示 Dashboard 组件，而当访问子路由时，会在 Dashboard 组件的 <router-view> 中显示相应的子组件。

五、路由导航守卫

路由导航守卫允许我们在路由切换之前或之后执行一些逻辑，例如验证用户身份、权限控制等。Vue Router 提供了多种类型的导航守卫，包括全局守卫、路由独享守卫和组件内守卫。

        1.全局守卫
        全局守卫在路由切换之前或之后执行，可以用于验证用户是否登录、权限控制等。以下是一个全局守卫的示例代码：

     const router = new VueRouter({
       routes,
     });

     router.beforeEach((to, from, next) => {
       // 判断用户是否登录
       const isLoggedIn = // 判断逻辑
       if (to.meta.requiresAuth &&!isLoggedIn) {
         // 如果需要登录但用户未登录，重定向到登录页面
         next('/login');
       } else {
         next();
       }
     });

• 在上面的代码中，我们使用 router.beforeEach 注册了一个全局前置守卫。在守卫函数中，我们可以通过 to（目标路由）、from（当前路由）和 next（控制导航的函数）参数来进行判断和控制导航。如果目标路由需要登录但用户未登录，我们将用户重定向到登录页面；否则，调用 next() 继续导航。

        2.路由独享守卫
        路由独享守卫只在特定的路由上生效，可以用于对特定路由进行更精细的控制。以下是一个路由独享守卫的示例代码：

     const routes = [
       {
         path: '/admin',
         component: Admin,
         meta: {
           requiresAuth: true,
           requiresAdmin: true,
         },
         beforeEnter: (to, from, next) => {
           // 判断用户是否是管理员
           const isAdmin = // 判断逻辑
           if (to.meta.requiresAdmin &&!isAdmin) {
             // 如果需要管理员权限但用户不是管理员，重定向到普通用户页面
             next('/user');
           } else {
             next();
           }
         },
       },
     ];

• 在上面的代码中，我们在 /admin 路由上定义了一个路由独享守卫 beforeEnter。在守卫函数中，我们可以进行特定于该路由的判断和控制导航。如果用户需要管理员权限但不是管理员，我们将用户重定向到普通用户页面；否则，调用 next() 继续导航。
  
  3.组件内守卫
  组件内守卫可以在组件内部定义，可以用于在组件渲染之前或之后执行一些逻辑。以下是一个组件内守卫的示例代码：

     const Admin = {
       template: '<div>Admin Page</div>',
       beforeRouteEnter(to, from, next) {
         // 在组件渲染之前执行
         const isAdmin = // 判断逻辑
         if (to.meta.requiresAdmin &&!isAdmin) {
           // 如果需要管理员权限但用户不是管理员，重定向到普通用户页面
           next(false);
         } else {
           next();
         }
       },
       beforeRouteLeave(to, from, next) {
         // 在组件离开之前执行
         // 可以进行一些清理工作或提示用户保存数据
         next();
       },
     };

• 在上面的代码中，我们在 Admin 组件内部定义了两个组件内守卫 beforeRouteEnter 和 beforeRouteLeave。beforeRouteEnter 在组件渲染之前执行，可以进行一些权限判断和控制导航；beforeRouteLeave 在组件离开之前执行，可以进行一些清理工作或提示用户保存数据。

六、总结

Vue 路由是构建单页应用的强大工具，它提供了丰富的功能和灵活的配置选项。通过合理地使用 Vue 路由，我们可以轻松构建出复杂的单页应用，实现流畅的用户体验和高效的开发效率。在实际开发中，我们可以根据项目的需求和特点，选择合适的路由配置和导航守卫，以确保应用的安全性和稳定性。希望本文对你理解和使用 Vue 路由有所帮助。

本文标签： 路由 Vue