vue3路由基本使用

在 Vue 3 中，路由指的是应用程序的导航系统，允许你在不同的视图或页面之间进行切换。通过 vue-router 插件，你可以定义路由规则，将 URL 路径映射到 Vue 组件，实现页面间的跳转和状态管理。使用路由，用户可以在应用中导航不同的视图，同时保持浏览器的历史记录。

一 路由的基本使用

1. 安装 vue-router

npm install vue-router@next

2. 创建路由配置

定义路由配置通常在一个单独的文件中完成，例如 router/index.js 或 router/index.ts。配置包括路径、组件和其他路由属性：

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

export default router;

3. 在应用中使用路由

在你的 Vue 应用中，通常会在 main.js 或 main.ts 中使用 router 实例：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

4. 路由视图

使用 组件在你的模板中展示路由匹配的组件。这个组件充当路由占位符：

<script lang="ts" setup name="App">
  import {RouterLink,RouterView} from 'vue-router'  
</script>

<template>
  <div>
    <router-view></router-view>
  </div>
  <RouterLink to="/home" active-class="active">首页</RouterLink>
</template>

5 命名路由

命名路由允许你为每个路由定义一个唯一的名称，方便在应用中引用和导航。定义命名路由时，你可以在路由配置中为每个路由指定一个 name 属性

• 在路由配置中为每个路由指定 name 属性：

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: HomeComponent
  },
  {
    path: '/about',
    name: 'About',
    component: AboutComponent
  }
];

• 使用 组件时，可以通过 :to 属性的对象形式来引用命名路由：

<router-link :to="{ name: 'Home' }">Home</router-link>
<router-link :to="{ name: 'About' }">About</router-link>

• 编程式导航

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    function goToHome() {
      router.push({ name: 'Home' });
    }

    return { goToHome };
  }
};

• 带参数的命名路由

当路由需要参数时，可以在 :to 对象中添加 params 属性：

<router-link :to="{ name: 'UserProfile', params: { id: 123 } }">User Profile</router-link>

编程式导航时也可以传递参数：

router.push({ name: 'UserProfile', params: { id: 123 } });

6 嵌套路由

嵌套路由允许你在一个路由中定义子路由，从而构建层级结构的页面。这样可以在一个页面内展示多个视图或组件。

• 定义嵌套路由

在路由配置中，将子路由定义在父路由的 children 属性下：

const routes = [
  {
    path: '/dashboard',
    component: DashboardLayout,
    children: [
      {
        path: '',
        name: 'DashboardHome',
        component: DashboardHome
      },
      {
        path: 'settings',
        name: 'DashboardSettings',
        component: DashboardSettings
      }
    ]
  }
];

7 路由重定向

路由重定向的作用是自动将用户从一个路径引导到另一个路径。它可以用于以下几种情况：

• 默认路径：例如，将根路径 / 重定向到主页 /home。

{
    path:'/',
    redirect:'/about'
}

• 旧路径更新：将旧的或过时的路径重定向到新的路径，以保持链接的有效性。
• 权限控制：将用户重定向到登录页面，如果他们尝试访问受限区域而未登录。

二 路由的操作

1. 导入 useRouter 和 useRoute

在 Vue 3 中，你需要从 vue-router 导入 useRouter 和 useRoute，这两个函数提供了对路由实例和当前路由信息的访问。

import { useRouter, useRoute } from 'vue-router';

2. 进行路由导航

使用 useRouter 来执行路由导航操作。例如，你可以在组件中定义方法来进行导航：

export default {
  setup() {
    const router = useRouter();

    function goToHome() {
      router.push('/');
    }

    function goToUserProfile(userId) {
      router.push({ name: 'user-profile', params: { id: userId } });
    }

    return { goToHome, goToUserProfile };
  }
};

3. 访问当前路由信息

使用 useRoute 来访问当前路由的信息，如路径、查询参数和动态路由参数：

export default {
  setup() {
    const route = useRoute();

    console.log(route.path);  // 当前路由的路径
    console.log(route.params.id);  // 动态路由参数
    console.log(route.query.search);  // 查询参数

    return { route };
  }
};

4. 路由守卫

你可以在 setup 函数中使用 onBeforeRouteEnter 和 onBeforeRouteUpdate 进行路由守卫：

import { onBeforeRouteEnter, onBeforeRouteUpdate } from 'vue-router';

export default {
  setup() {
    onBeforeRouteEnter((to, from, next) => {
      // 在路由进入之前执行的逻辑
      if (/* 条件 */) {
        next();
      } else {
        next('/login');
      }
    });

    onBeforeRouteUpdate((to, from, next) => {
      // 在路由更新之前执行的逻辑
      if (/* 条件 */) {
        next();
      } else {
        next('/error');
      }
    });
  }
};

5. 使用路由钩子

你可以在 setup 函数中使用 Vue 的生命周期钩子来处理路由相关的逻辑：

import { onMounted } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();

    onMounted(() => {
      console.log('Current route path:', route.path);
      // 处理路由信息
    });

    return { route };
  }
};

6. 监听路由变化

使用 watch API 监听路由变化并响应：

import { watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();

    watch(
      () => route.params.id,
      (newId, oldId) => {
        console.log(`Route parameter ID changed from ${oldId} to ${newId}`);
        // 执行需要根据路由变化更新的逻辑
      }
    );

    return { route };
  }
};

7. 路由懒加载

通过懒加载组件来提高应用的性能：

const UserProfile = () => import('../components/UserProfile.vue');

const routes = [
  {
    path: '/user/:id',
    name: 'user-profile',
    component: UserProfile
  }
];

8. 使用路由元信息

路由元信息可以用于存储额外的信息，例如权限检查：

const routes = [
  {
    path: '/admin',
    component: AdminComponent,
    meta: { requiresAuth: true }
  }
];

// 在路由守卫中检查元信息
import { onBeforeRouteEnter } from 'vue-router';

export default {
  setup() {
    onBeforeRouteEnter((to, from, next) => {
      if (to.meta.requiresAuth && !isAuthenticated()) {
        next('/login');
      } else {
        next();
      }
    });
  }
};

三 路由的两种工作模式

1 history模式

1. 工作原理

history模式利用 HTML5 的 History API (pushState, replaceState, 和 popState 事件) 来管理路由。浏览器的 URL 不包含 # 符号，而是直接显示路由的路径部分。需要对服务器进行配置，以确保所有路由请求都返回应用的入口 HTML 文件。

2. 优点

• 更清晰的 URL：没有 # 符号，URL 更加整洁和符合标准。
• 支持更复杂的功能：支持浏览器的前进、后退功能，与传统的浏览器行为一致。

3. 缺点

• 需要服务器配置：必须配置服务器以处理路由，避免 404 错误。

4. 示例

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

5 URL 示例

• 首页：http://example.com/
• 关于页：http://example.com/about

2 hash模式

1. 工作原理

哈希模式使用 URL 的 # 符号后面的部分来表示路由状态。浏览器不会将 # 后面的部分发送到服务器，所有的路由切换都在客户端完成。

2. 优点

• 兼容性：几乎所有浏览器都支持哈希模式，且不需要额外的服务器配置。
• 简单：无需配置服务器即可处理路由。

3. 缺点

• URL 显得不美观：URL 中包含 # 符号，这可能会影响用户体验和 SEO。
• 某些功能限制：如部分工具或库可能对哈希 URL 的支持较差。

4. 示例

import { createRouter, createWebHashHistory } from 'vue-router';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

4. URL 示例

首页：http://example.com/#/
关于页：http://example.com/#/about

四 路由传参

1 query参数

• 定义路由

Query 参数不需要在路由定义中做特别设置：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Search from '@/components/Search.vue';

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

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

• 访问 Query 参数

在组件中，使用 useRoute 来访问查询参数：

<template>
  <div>
    <h1>Search Query: {{ query }}</h1>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const query = computed(() => route.query.q);

    return { query };
  }
}
</script>

• 路由跳转

使用 useRouter 进行跳转并传递查询参数：

<template>
  <button @click="search('vue')">Search for Vue</button>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    function search(query) {
      router.push({ path: '/search', query: { q: query } });
    }

    return { search };
  }
}
</script>

2 params参数

• 定义路由

首先，设置带有路径参数的路由：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import User from '@/components/User.vue';

const routes = [
  {
    path: '/user/:id',
    component: User
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

• 访问 Path 参数

在组件中，使用 useRoute 来访问路径参数：

<template>
  <div>
    <h1>User ID: {{ userId }}</h1>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const userId = computed(() => route.params.id);

    return { userId };
  }
}
</script>

• 路由跳转

使用 useRouter 进行跳转并传递路径参数：

<template>
  <button @click="goToUser(123)">Go to User 123</button>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    function goToUser(id) {
      router.push(`/user/${id}`);
    }

    return { goToUser };
  }
}
</script>

• 总结

params参数 是在路由路径中定义的动态部分（如 /user/:id），在 URL 中直接显示，通常用于标识资源的唯一性。在组件中，通过 useRoute 访问 route.params 来获取这些参数。

query参数 是附加在 URL 末尾的键值对（如 /search?q=vue），用于传递额外的过滤或搜索条件。在组件中，通过 useRoute 访问 route.query 来获取这些参数。