个人技术分享

安装

npm

npm install vue-router@4

yarn

yarn add vue-router@4

Vue路由基础

router-link 组件导航

是 Vue Router 提供的一个组件，用于用户界面中的导航。使用 .to 属性指定导航的目标地址。

<router-link to="/about">About</router-link>

router-view 路由出口

组件是一个容器，它渲染当前路由匹配的组件。每当路由改变时， 加载并显示相应的组件。

<router-view></router-view>

单独导入关于路由的库文件

Vue Router 需要单独安装并导入到你的 Vue 项目中。

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

定义路由组件

路由组件就像任何其他 Vue 组件，但它们通常与路由路径关联。

<template>
  <div>Home Page</div>
</template>

定义路由规则对象

每个路由规则映射到一个组件。

const routes:Array<RouteRecordRaw>=[
    {
        path:'/',
        name:'home',
        component:Home
    }
];

创建router实例

使用 createRouter 方法创建路由实例。

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

将路由对象挂载Vue实例上

在创建 Vue 应用实例时使用 .use() 方法安装路由。

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

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

redirect 路由重定向

在路由规则中可以设置重定向，通常用于将用户从一个路径自动导向另一个路径。

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

嵌套路由

嵌套路由允许你构建更复杂的用户界面结构，其中一个组件内部包含多个 。

const routes: Array<RouteRecordRaw> = [
  { 
    path: '/user/:id',
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
];

路由传参

params形式传参

使用动态路由匹配传递参数，参数作为路径的一部分。

{ path: '/user/:id', component: User }

query形式传参

使用 URL 的查询字符串传递参数。

<router-link :to="{ path: '/search', query: { q: 'keyword' }}">Search</router-link>

访问：/search?q=keyword。

params方式与query方式的区别

params：参数视为 URL 的一部分，不出现在 URL 查询字符串中，必须由路由路径定义。
query：参数以 ? 开始的形式附加在 URL 后，不需要在路由路径中定义。

restful风格传参

RESTful 风格的传参通常使用 params 方式，参数是 URL 的一部分，适用于表示资源层级结构。

{ path: '/api/user/:userId/book/:bookId', component: Book }

编程式路由

编程式路由指的是使用 JavaScript 来控制路由跳转，而不是通过声明式的 标签。这允许更加动态和条件性的导航逻辑。

• router.push(location, onComplete?, onAbort?)：导航到一个不同的 URL。行为类似于点击一个 。这是前进到一个新的历史记录。
• router.replace(location, onComplete?, onAbort?)：跟 push 类似，不同的是，它不会留下历史记录。
• router.go(n)：在历史记录中前进或后退多少步，类似 window.history.go(n)。

// useNavigation.ts
import { useRouter } from 'vue-router';

export default function useNavig ation() {
  const router = useRouter();

  const goToHome = () => {
    router.push('/home');
  };

  const replaceWithAbout = () => {
    router.replace('/about');
  };

  const goBack = () => {
    router.go(-1);
  };

  return { goToHome, replaceWithAbout, goBack };
}

Params 形式传参

// router.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import UserProfile from '@/components/UserProfile.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/user/:userId', // :userId 是动态部分
    component: UserProfile
  }
];

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

export default router;

import { useRouter } from 'vue-router';

export default function useUserProfileNavigation() {
  const router = useRouter();

  const goToUserProfile = (userId: string) => {
    router.push({ name: 'user', params: { userId } }); // 确保路由名称或路径匹配
  };

  return { goToUserProfile };
}

Query 形式传参

import { useRouter } from 'vue-router';

export default function useSearchNavigation() {
  const router = useRouter();

  const searchItems = (keywords: string) => {
    router.push({ path: '/search', query: { q: keywords } });
  };

  return { searchItems };
}

RESTful 风格传参

RESTful 风格的 params 传参本质上和普通的 params 传参没有区别，都是将参数作为 URL 的一部分。区别在于 RESTful 风格强调资源的表达方式更为清晰和直观。通常，在设计 API 和路由时采用 RESTful 风格。

通过wathc实现路由监听

在 Vue 3 中，你可以使用 watch 来监听路由变化，这对于依赖于路由状态的应用特别有用。例如，你可能需要根据路由参数加载数据。

// useRouteWatcher.ts
import { watch } from 'vue';
import { useRoute } from 'vue-router';

export default function useRouteWatcher() {
  const route = useRoute();

  watch(() => route.params, (newParams, oldParams) => {
    console.log('Route changed', newParams);
  }, { deep: true });
}

导航守卫

导航守卫是一种特别有用的路由控制技术，允许你在路由发生变化之前执行逻辑，比如权限验证、数据预加载等。

// 在router/index.js中设置
import { NavigationGuardNext, RouteLocationNormalized } from 'vue-router';

router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next({ path: '/login' });
  } else {
    next();
  }
});

$route 和 $router 的区别

• $route：是一个“路由信息对象”，包含了如路径、查询参数（query）、路由参数（params）等路由信息。
• $router：是 Vue Router 的实例，可以用它来进行编程式的导航（如 router.push）。

// 例如，在一个组件中
import { useRoute, useRouter } from 'vue-router';

export default function useCheckDetails() {
  const route = useRoute();
  const router = useRouter();

  const checkDetails = () => {
    const id: string = route.params.id as string;
    router.push(`/details/${id}`);
  };

  return { checkDetails };
}