--- theme: smartblue --- # 引言在我们实现单页面应用的过程中，路由管理是不可或缺的一个环节。Vue Router作为Vue.js的官方路由管理器，使我们非常方便地处理页面之间的导航和路由控制。接下来就让我们通过一个小demo来了解Vue Router。 ![PixPin\_2024-12-30\_02-26-42.gif](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/af9464e8285241589e2ba7b51db5b99d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YWt5Liq54K5:q75.awebp?rk3s=f64ab15b&x-expires=1757595640&x-signature=vKi5XAVSZ%2B7W2NtJtxiGdLrz2BQ%3D) 要实现以上页面跳转的效果，就需要用到Vue Router，它允许你定义应用的路由规则，并管理页面之间的导航。**路由就是指根据不同的URL请求，分配展示不同的 vue 组件的过程**。 # Vue Router的引入使用官方文档：我们通过一个小demo来使用Vue Router实现跳转效果，通过查看官方文档，首先我们使用`npm install vue-router@4`在终端安装Vue Router。然后在src路径下创建一个名为views文件夹，里面先创建一个`Login.vue`文件的用来放登录页面，里面写些基本样式。 // Login.vue ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/057ab0ec2af5480da33c6397f778c71c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YWt5Liq54K5:q75.awebp?rk3s=f64ab15b&x-expires=1757595640&x-signature=BhHZcc%2BLkTMFYD1z3eOVxq5YiZc%3D) 接着在views文件夹中新建一个`Home.vue`文件用于存放首页的页面。 // Home.vue ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/02ce0cdc06d5484cb2ed8945cfd027b1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YWt5Liq54K5:q75.awebp?rk3s=f64ab15b&x-expires=1757595640&x-signature=4yLVrDlFwsPfMijwUtv1%2BEVfcR4%3D) 然后需要给登录按钮绑定点击事件，使其点击会跳转上面的`Home.vue`页面，这时候就需要用到`Vue Router`了，在 src 下面创建一个 router 文件夹，里面再创建一个 index.js 文件。首先导入从 vue-router 包中导入 createRouter 函数，定义一个路由数组，每个路由都是一个对象，包含`path`（路径）和`component`（返回`import()`调用的函数）等属性，然后再创建一个路由实例，最后再抛出这个路由以便在该项目的其它文件中接收。 // ./router/index.js import { createRouter, createWebHistory } from "vue-router"; import Login from "../views/Login.vue"; // 静态加载，无论有没有使用一开始直接加载组件 // 定义路由数组 const routes = [ { path: "/login", component: Login }, { path: "/home", component: () => import("../views/Home.vue") // 动态加载该路径下的组件，只有在访问时才会加载 } ] // 创建路由实例 const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: routes }) // 抛出路由 export default router 然后设置路由的显示位置，也就是路由的出口。 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/391bff596c8b44f781ff36210cd60caa~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YWt5Liq54K5:q75.awebp?rk3s=f64ab15b&x-expires=1757595640&x-signature=RQchdZh%2BnJuerM7FUQ1Y3dc%2B%2F7Q%3D) 将 Login 与 Home 各添加进路由抛出后，就需要首先在全局入口`main.js`安装这个路由实例 // main.js import router from './router/index.js' // 可省略后面的 /index.js createApp(App).use(router).mount('#app') 然后在给登录按钮绑定点击跳转事件。 // Login.vue 这样就可以实现点击登录跳转了。 ![PixPin\_2024-12-30\_01-14-38.gif](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b80d42b6fda74be19f5c7cc9dd5c3702~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YWt5Liq54K5:q75.awebp?rk3s=f64ab15b&x-expires=1757595640&x-signature=XOj%2BwG3shEKyMhCGzySYuPElInw%3D) # Vue Router的传参 ## path + query:{} 传参 router.push({path: '/xxx', query: {xxx: xxx}}) 携带参数跳转比如在上面的 Login.vue 的跳转router.push在后面加上`query: {xxx: xxx}`即可把该数据携带到要跳转的 Home 页面，如下。将输入的用户名中的值传出去。里面也可以多写几个要传的值，这里我们只传一个值看看效果。然后我们在 Home.vue 组件中使用 useRoute 接收。 **注意这里是useRoute，而不是useRouter。** 1. **useRouter 是获取路由的实例对象，它和router 文件夹下的 index.js 中的路由对象是同一个** 2. **useRoute 是获取当前路由的信息** 然后再用 `Welcome, {{ route.query.name }}` 渲染到 welcome 后面。 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/43216bb741e94babb6f3b22109fd2a36~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YWt5Liq54K5:q75.awebp?rk3s=f64ab15b&x-expires=1757595640&x-signature=OO9O%2BU7%2B7Rl8F%2BXzlnNC6nqQGQs%3D) ## name + params:{} 传参 const login = () => { router.push({ name: '/Home', params: { name: username.value } }) } 这样写的话就需要在`./router/index.js`下面配置路由时需要增加一个属性name： const routes = [ { path: "/login", name: "Login", component: Login }, { path: "/home/:name", // 需在path中写上 /:name name: "Home", component: () => import("../views/Home.vue") } ] 然后`route.params.name`渲染即可，但是一般建议使用第一种方法传参。 # 二级路由当我们来到首页点击左侧菜单时，右边内容也应该跳转到对应 url 位置。 1. vue-router提供了一个全局组件 router-link 2. router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#) 3. router-link提供了声明式导航高亮的功能(自带类名) ./router/index.js 路由下在 home 路由下配置子路由，使用 `children` 来配置子路由也就是二级路由，当然三级四级路由都可以配置，只需一层一层嵌套即可。 ``` const routes = [ { path: "/login", component: Login }, { path: "/home", component: () => import("../views/Home.vue"), children: [{ path: "/home/user", // 因为 user 路由是 home 的子路由，路径设置成"/home/user"更加优雅 component: () => import("../views/User.vue") } ] } ] ``` 路由显示位置： ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6cd4309d520c41fc96c1ee6507e6340f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YWt5Liq54K5:q75.awebp?rk3s=f64ab15b&x-expires=1757595640&x-signature=yPwIccmGNVAI9VPlxtCoWGeLGsc%3D) 每个路由组件都是在其父组件的``内部渲染的，所以不同路由的显示位置不会冲突。 ![PixPin\_2024-12-30\_02-09-14.gif](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/680d795fabee4dd0a90861cacd5284f1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YWt5Liq54K5:q75.awebp?rk3s=f64ab15b&x-expires=1757595640&x-signature=T6PWUornS5DtLi38JCaSNYps1FA%3D) 一般情况下点击登录后菜单应该会选择一个默认的子菜单显示，所以我们需要使用`redirect`重定向。 const routes = [ { path: "/login", component: Login }, { path: "/home", component: () => import("../views/Home.vue"), children: [{ path: "/home/user", component: () => import("../views/User.vue") }, { path: "", redirect: "/home/user" // 重定向当页面来到home是默认选中的子路由 } ] } ] 这样就可以使得当点击登录来到根路径`/home`时，自动定向到`/home/user`路由。效果如下： ![PixPin\_2024-12-30\_02-20-37.gif](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6cc7b22afb584c9aa9520def8cc71276~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YWt5Liq54K5:q75.awebp?rk3s=f64ab15b&x-expires=1757595640&x-signature=sERIHsh2Q6Pfoy7aftGB6eZRth8%3D) # 总结 1. 路由是指根据不同的URL请求，分配展示不同的 vue 组件的过程。 2. router 只需要配置 path 与 component 的映射关系 3. router.push() 可以跳转到指定的路由 4. router.push({path: '/xxx', query: {xxx: xxx}}) 可以携带参数跳转 5. useRouter 获取路由的实例对象，它和router 文件夹下的 index.js 中的路由对象是同一个 6. useRoute 获取当前路由的信息 7. 二级路由的配置：将某子路由配置在该路由的 children 中，在该路由的组件中通过渲染出子路由的组件好啦，关于Vue Router路由管理器就介绍到这里了，希望文章对你能有所帮助，同时可以给文章点点赞支持一下哦。 ![动物园里有什么.gif](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/bdd9d70978734ac58167918a2f1e6120~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5YWt5Liq54K5:q75.awebp?rk3s=f64ab15b&x-expires=1757595640&x-signature=x1CXRlbrS1FspBC0KIGwA9%2B2poQ%3D)

旅梦的后台管理系统