路由基础
1.1 概念
路由的概念不仅存在于硬件设备中，也在后端项目中有所应用。例如，访问以下网页：
页面1：https://www.php.cn/link/dc05a22fa14faf0bd230a08b658b156d页面2：https://www.php.cn/link/c3fdcb6bbc2bd6e8263cceb41c22b64b页面3：https://www.php.cn/link/121f6f951ebe28c187c975e6c17c081d
通过URL在地址栏查看这些页面，请求会发送到服务器，服务器根据URL决定跳转到哪个页面。
前端路由则利用了HTML5的History API，或者之前的哈希散列方式。这种方法可以兼容低版本浏览器。例如：
https://www.php.cn/link/cb53c399f26849a87fe718b19e8c16cahttps://www.php.cn/link/ef926983fef6f9c7f1207289ac8a0331https://www.php.cn/link/c7518a1b6d7dfba75ad2cc2fc526fa65
服务器不会解析#后面的内容，JavaScript通过window.location.hash获取并匹配到不同的功能。哈希值改变不会导致浏览器刷新，这是其优点之一。
1.2 使用路由
使用Vue.js路由，可以通过以下步骤：
立即学习“前端免费学习笔记（深入）”；
运行npm run vue-router命令。导入Vue和VueRouter：
import Vue from 'vue'; // 加载Vue.jsimport VueRouter from 'vue-router'; // 从npm包中导入VueRouter类import HomeView from '../views/HomeView.vue'; // 导入HomeView组件
明确安装路由功能：
Vue.use(VueRouter);
在脚手架中，配置文件位于/src/router/index.js。创建路由对象后，将其引入到main.js并注册到Vue实例上。
注册后，可以使用内置组件router-link和router-view进行页面跳转。
1.3 index.js 研究
在index.js中，定义路由常量，使用ES6语法，可以定义多个路由子项，格式如下：
琅琅配音
全能AI配音神器
208 查看详情
const routes = [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', component: () => import('../views/AboutView.vue') }];
1.4 App.vue
在App.vue中，使用router-link和router-view组件进行页面跳转：
Home | About
1.5 整个逻辑图
整个路由逻辑图展示了从用户点击链接到页面渲染的完整流程。
1.6 增加自己的组件
在views目录下添加Goods.vue组件：
商品详情页面商品ID:{{ $route.params.gid }}
1.7 在路由里面增加配置
在路由配置中添加新的路由项：
{ path: '/goods/:gid', name: 'Goods', component: () => import('../views/Goods.vue') }
1.8 在App.vue调用
在App.vue中添加新的链接：
查看商品
1.9 完毕之后，npm run serve测试运行 效果：
1.10 理论的总结
在路由中，多段“路径参数”都放在$route.params中，设置格式如下：
{gid: '1001'} 匹配路径 /goods/1001，模式 /goods/:gid{type: 'shoes', gid: '1001'} 匹配路径 /goods/shoes/1001，模式 /goods/:type/:gid
以上就是vue.js路由配置和设置技术的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/431535.html
微信扫一扫 
支付宝扫一扫 
