07｜路由设计：如何借助Vue Router设计出更合理的路由？
初识 Vue Router
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
Vue Router是Vue.js框架中的重要组件，本文详细介绍了如何设计更合理的路由，并通过实例和代码演示了Vue Router的基本配置和常见功能。文章首先介绍了Vue Router的重要标签router-link和router-view，并提供了它们的用法示例。接着，通过实操练习演示了在Vue项目中如何使用Vue Router配置路由，包括安装Vue Router的依赖包、定义路由配置文件、将路由绑定到Vue实例上以及在App.vue中加上router-view标签。此外，还介绍了带参数的动态路由匹配、重定向、别名和嵌套路由的配置方法，以及懒加载的实现方式。另外，还介绍了常见的Router API，包括路由跳转、回退功能以及组件的路由钩子函数和全局路由钩子函数。总的来说，本文为读者提供了设计合理路由的实用指南，使读者能够快速了解Vue Router的功能和属性，以便在实际项目中灵活应用。文章还提出了思考题，鼓励读者在实践中尝试整合其他依赖，如Vue常用的UI组件库Element-UI。
《Python 实战 · 从 0 到 1 搭建直播视频平台》，新⼈⾸单¥59
全部留言(19)
- 最新
- 精选
🤬有些样式和内容不是很明确，能不能放一下代码？作者回复: 可以的，本周就会上传相应的代码，请关注专栏信息
2023-05-08归属地：广东2
coderHOW跟着教程实操一边确实学习到很多 有几点总结一下， 1. vue-router3.x版本和4.x版本的路由配置会有一些差别，如果之前用vue-cli配置是3.x版本的可以按照 https://v3.router.vuejs.org/zh/guide/#javascript 这个来，如果是冲重新安装的 npm install vue-router@4，按照 https://router.vuejs.org/zh/guide/ 来配置 2. 升级 babel7.x 先把 package.json babel 开头的依赖删掉，再删掉 node_modules 然后 package.json 加上： "@babel/cli": "^7.21.5", "@babel/core": "^7.22.1", "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/plugin-transform-classes": "^7.21.0", "@babel/plugin-transform-runtime": "^7.22.4", "@babel/preset-env": "^7.22.4", "babel-loader": "^8.0.4", 再 npm install 重新安装一下 然后修改.babelrc为： { "presets": [ "@babel/preset-env" ], "plugins": [ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties", "@babel/plugin-transform-classes" ] }作者回复: 很开心看到你的收获，以及你的认可，也感谢你学习过程中的分享，我们一起加油，每天进步一点点。
2023-06-11归属地：广东1
友我是访问 localhost:8080/#/about 才出现的页面 其实我现在也搞不清楚前端这些东西了作者回复: 我可以帮你梳理一个思路，这样会对你有帮助： 1、如果我们想在浏览器访问项目中的页面，那我们就需要创建路由，这样才可以被访问到。 2、那我们在配置路由的时候，我们需要有对应的组建文件，因为你发现在路由中是要写明对应组件的文件路径的。 3、这时候就要关注你组件的内容了，也就是页面开发的过程，要展示什么？要有哪些功能？以及做那些页面关联，结合着以上的问题，你就把页面开发出来了。 以这样的一个思维去理解，我相信会对你有帮助。只要我们链路清晰，万变不离其中。继续加油！！！
2023-05-25归属地：云南1
功夫熊猫老师你好，安装vue-router@4的时候会报错，看起来是不是router 4的版本yao 依赖vue 3.2.0以上版本，但是前边一路教程下来，安装下来的应该是vue2.9.6版本 npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: video@1.0.0 npm ERR! Found: vue@2.7.15 npm ERR! node_modules/vue npm ERR! vue@"^2.5.2" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer vue@"^3.2.0" from vue-router@4.2.5 npm ERR! node_modules/vue-router npm ERR! vue-router@"4" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry作者回复: 正常如果你直接以cli创建的方式，会自动生成相应的router，如果单独配置会出现不匹配的情况。建议按cli的安装方式进行操作。
2023-10-27归属地：北京- 功夫熊猫为啥课本里描述的代码和代码库的代码完全不同，还有人在管理吗？课件里的引入两个组件啥意思，也没找到home.vue，代码库的代码也运行不同，不知道是不是太久了，版本问题导致都失效了。 //引入两个自己定义好的组件 import Home from '../pages/Home.vue' import About from '../pages/Home.vue'
作者回复: 同学你好，是这样，Home.vue文件是作为index.vue的测试文件，内部代码实现一样，可以直接删除，如果出现找不到文件的情况，可直接删除。
2023-10-23归属地：北京 
明仔的阳光午后懒加载的写法二 `ComponentA：resolve=>(['需要加载的路由的地址'，resolve])`没起作用，改成`ComponentA：resolve=>require(['需要加载的路由的地址'，resolve])`之后才起作用作者回复: 同学你的写法是正确的，这个在课程中的代码就是这样写的，同学，在最后的src/router/index.js 配置路由文件内。
2023-08-29归属地：福建- Geek_88cc02老师，有代码地址吗？叙述过于抽象了 about组件那些都么有，看不懂 我们真没基础
作者回复: 你好，About组件是这样，为什么我没有放了，因为它就是一个单独的页面组建，组件的内容我们是不用关注的，你可以直接在你的项目中创建一个about.vue文件就可以了，这里我们重点关注就是在页面跳转过程中实现就可以，重点在router的应用方法，是这样的关系，所以我没有放about的代码，它不影响我们对路由的学习，如果还有不解之处，可以再回评。
2023-06-10归属地：广东 - Geek_88cc02Home 组件 About 组件代码没有讲吧？
作者回复: 同学，这个我在上一个问题给回复了，About组件你完全可以创建一个.vue文件，我们不用关注组件内的内容，主要是通过路由操作可以实现路由切换，从而展示对应的页面信息就可以。
2023-06-10归属地：广东 
阿望(tom)老师，你的代码Layout 里边 下边 css 用了 less, 但是在文中还有你的git代码里边 没有提到需要安装这个扩展，于是我这边搜了一下 ，按照文中给出的搭建方法，less-loader 还只能安装@5.0.0版本，,另外在 编译过程中 项目并不能100%编译 ，提示 app.vue {parse:"babylon"} 被废弃了 需要换成 {parser::"balbel"} 请问这2个问题，能讲解下吗作者回复: 问题我给解答一下，第一个问题，使用 <style lang="less" scoped> 主要来定义组件内的样式，使用 scoped 属性可以将样式限制在当前组件的作用域内，从而避免全局样式冲突，这个使用非必需哈，解决方法我在评论区做了集中回复，你可以查看一下。 第二个问题：关于JavaScript语法解析器的问题。在JavaScript中，解析器负责将源代码转换为可执行的代码。具体而言，{parse:"babylon"}和{parser:"babel"}是指两种不同的解析器，即Babylon和Babel。这两个解析器都可以解析JavaScript代码，但是Babylon是旧版的解析器，已经被废弃不再维护，而Babel是新一代的解析器，使用更广泛的工具集，更加灵活和强大。 因此，意味着你需要将解析器从Babylon替换为Babel。 要解决这个问题，你可以尝试更新你的工具链或者使用已经集成了Babel的工具。如果你正在使用npm或yarn等包管理器，你可以通过运行以下命令安装Babel： npm install --save-dev @babel/core @babel/cli @babel/preset-env 然后，在你的项目根目录中创建一个名为.babelrc的文件，内容如下： { "presets": [ "@babel/preset-env" ] } 这将告诉Babel使用env preset来转换你的代码。
2023-05-31归属地：阿联酋- Geek_840593ERROR Failed to compile with 1 errors 18:14:14 error in ./src/components/PC/MyHeader.vue Module build failed: .book-header { border-bottom: 1px solid @border-color; ^ Variable @border-color is undefined in /Users/guoyan/my-project/src/components/PC/MyHeader.vue (line 191, column 27) @ ./node_modules/.store/vue-style-loader@4.1.3/node_modules/vue-style-loader!./node_modules/.store/css-loader@3.2.0/node_modules/css-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-72e0c896","scoped":true,"hasInlineConfig":false}!./node_modules/.store/less-loader@5.0.0/node_modules/less-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/PC/MyHeader.vue 4:14-463 15:3-20:5 16:22-471 @ ./src/components/PC/MyHeader.vue @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/Layout/Layout.vue @ ./src/Layout/Layout.vue @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue @ ./src/App.vue @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
作者回复: 目前看这个错误的提示是变量 @border-color 在 MyHeader.vue 组件的第 191 行被使用，但是它没有被正确地定义或者引入。 解决这个问题你可以尝试先确认是否在组件的样式中定义了 @border-color 变量，如果没有，则需要引入该变量或者手动定义它。如果已经定义了该变量，则需要检查它的值是否正确。你可以尝试先来解决一下，如果还有问题可以把具体的代码发出来看看，希望可以帮助到你。
2023-05-25归属地：重庆8