Vue.js 路由设置包括：安装 Vue Router；创建 Vue Router 实例；定义路由配置（路径、组件和导航规则）；应用路由；在组件中使用 $router 访问路由信息。
Vue.js 路由设置
Vue.js 路由是管理单页面应用程序 (SPA) 中页面导航的重要功能。它允许我们根据特定条件在不同的组件之间导航。以下是如何在 Vue.js 中设置路由：
1. 安装 Vue Router
npm install vue-router
2. 创建 Vue Router 实例
立即学习“前端免费学习笔记（深入）”；
import VueRouter from 'vue-router';
import Vue from 'vue';
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
// 路由配置（见下文）
]
});3. 定义路由配置
路由配置指定了路径、组件和导航规则。
const routes = [
{
path: '/',
component: Home,
meta: { requiresAuth: true }
},
{
path: '/about',
component: About
}
];- path： 要匹配的 URL 路径。
- component： 当该路径匹配时要渲染的组件。
- meta： 可选的元数据对象，用于指定导航规则（例如需要身份验证）。
4. 应用路由
将 Vue Router 实例挂载到 Vue 根实例。
new Vue({
router
}).$mount('#app');5. 在组件中使用路由
可以使用 $router 访问路由信息。
// 在组件中
this.$router.push('/'); // 导航到根路径其他设置：
- 滚动行为： 配置路由导航时的页面滚动行为。
- 过渡： 添加过渡动画以平滑地切换组件。
- 中间件： 使用导航守卫在导航之前或之后执行特定操作。
- 嵌套路由： 创建子路由来表示复杂的多级导航结构。
