第V章-Ⅰ Vue3路由vue-router初识
- 安装
- Vue路由基础
- router-link 组件导航
- router-view 路由出口
- 单独导入关于路由的库文件
- 定义路由组件
- 定义路由规则对象
- 创建router实例
- 将路由对象挂载Vue实例上
- redirect 路由重定向
- 嵌套路由
- 路由传参
- params形式传参
- query形式传参
- params方式与query方式的区别
- restful风格传参
- 编程式路由
- Params 形式传参
- Query 形式传参
- RESTful 风格传参
- 通过wathc实现路由监听
- 导航守卫
- $route 和 $router 的区别
安装
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 };
}