vue3,vue-router路由跳转 多页面跳转

### Vue3 中使用 vue-router 实现多页面路由跳转 #### 安装与初始化 为了在项目中使用 `vue-router`，需要先通过 npm 或 yarn 进行安装： ```bash npm install vue-router@next --save ``` 或者 ```bash yarn add vue-router@next ``` 完成安装之后，在项目的入口文件（通常是 main.js 或者 main.ts）引入并创建路由器实例。 #### 创建 Router 实例 定义好所有的路由规则，并将其传递给 createRouter 函数来创建一个新的路由器对象。这里展示了一个简单的例子[^1]： ```javascript import { createApp } from 'vue' import App from './App.vue' // 导入createRouter 和 createWebHistory 方法 import { createRouter, createWebHistory } from 'vue-router' const routes = [ { path: '/', name: 'Home', component: () => import('./views/HomeView.vue') }, { path: '/about', name: 'About', // 路由懒加载 component: () => import('./views/AboutView.vue') } ] const router = createRouter({ history: createWebHistory(), routes, }) const app = createApp(App) app.use(router).mount('#app') ``` 这段代码展示了如何设置基本的路由表以及怎样把它们挂载到应用程序上。注意这里的按需加载方式可以有效减少初始包体积大小。 #### 配置路径与组件映射关系 上述示例中的 `routes` 数组包含了两个对象，分别代表不同的页面及其对应的视图组件。每个对象都有三个属性：path (URL 地址), name (唯一标识符)，component (要渲染的内容)。 对于更复杂的场景，比如带有参数或多级嵌套的情况，可以在 route 对象里进一步扩展配置项。例如，当涉及到动态匹配部分 URL 参数时，可以通过冒号前缀的方式指定占位符；而对于子路由，则可以直接向父级路由下添加 children 字段即可。 #### 页面间导航 一旦设置了合适的路由规则后，就可以利用 `<router-link>` 组件来进行页面间的平滑过渡了。此标签会自动生成相应的 HTML 锚点元素，并且内部处理好了点击事件以触发正确的视图更新逻辑[^2]。 ```html <template> <div id="nav"> <router-link to="/">首页</router-link> | <router-link :to="{name:'About'}">关于</router-link> </div> <!-- 渲染当前激活的 view --> <router-view></router-view> </template> ``` 以上模板片段演示了两种不同类型的链接写法——一种是指定绝对路径字符串作为目标位置，另一种则是借助编程式的命名路由语法传参过去。 #### 处理加载状态 考虑到用户体验方面的需求，通常会在每次切换新页面之前显示一个短暂的 loading 提示框直到数据完全准备好为止。这可以通过监听全局钩子函数 beforeResolve 来实现: ```javascript router.beforeResolve((to, from, next) => { // 显示加载指示器... const matchedComponents = [] ;[].concat.apply([], to.matched.map(record => record.components)).forEach(component => { if (component.preFetch){ matchedComponents.push(component); } }); Promise.all(matchedComponents.map(c => c.preFetch())).then(() => { // 关闭加载指示器... next(); }); }); ``` 该回调接收三个参数分别是即将进入的目标页(to)、离开的源页面(from)还有继续执行后续操作所需的 next() 方法调用。在这个地方可以根据实际情况决定何时开启关闭进度条动画效果等。