路由基础

1.1 概念

路由的概念不仅存在于硬件设备中，也在后端项目中有所应用。例如，访问以下网页：

• 页面1：https://www./link/dc05a22fa14faf0bd230a08b658b156d
• 页面2：https://www./link/c3fdcb6bbc2bd6e8263cceb41c22b64b
• 页面3：https://www./link/121f6f951ebe28c187c975e6c17c081d

通过URL在地址栏查看这些页面，请求会发送到服务器，服务器根据URL决定跳转到哪个页面。

前端路由则利用了HTML5的History API，或者之前的哈希散列方式。这种方法可以兼容低版本浏览器。例如：

• https://www./link/cb53c399f26849a87fe718b19e8c16ca
• https://www./link/ef926983fef6f9c7f1207289ac8a0331
• https://www./link/c7518a1b6d7dfba75ad2cc2fc526fa65

服务器不会解析#后面的内容，JavaScript通过window.location.hash获取并匹配到不同的功能。哈希值改变不会导致浏览器刷新，这是其优点之一。

1.2 使用路由

使用Vue.js路由，可以通过以下步骤：

1. 运行npm run vue-router命令。
2. 导入Vue和VueRouter：

import Vue from 'vue'; // 加载Vue.js
import VueRouter from 'vue-router'; // 从npm包中导入VueRouter类
import HomeView from '../views/HomeView.vue'; // 导入HomeView组件

3. 明确安装路由功能：

Vue.use(VueRouter);

4. 在脚手架中，配置文件位于/src/router/index.js。创建路由对象后，将其引入到main.js并注册到Vue实例上。

5. 注册后，可以使用内置组件router-link和router-view进行页面跳转。

1.3 index.js 研究

在index.js中，定义路由常量，使用ES6语法，可以定义多个路由子项，格式如下：

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组件进行页面跳转：

乐彼多用户商城系统LBMall(.net)

乐彼多用户商城系统，采用ASP.NET分层技术和AJAX技术，运营于高速稳定的微软.NET+MSSQL 2005平台；完全具备搭建超大型网络购物多用户网上商城的整体技术框架和应用层次LBMall 秉承乐彼软件优秀品质，后台人性化设计，管理窗口识别客户端分辨率自动调整，独立配置的菜单操作锁，使管理操作简单便捷。待办事项1、新订单、支付、付款、短信提醒2、每5分钟自动读取3、新事项声音提醒 店铺管理1

下载

<router-link to="/">Home</router-li
nk> | 
<router-link to="/about">About</router-link>
<router-view></router-view>

1.5 整个逻辑图

整个路由逻辑图展示了从用户点击链接到页面渲染的完整流程。

1.6 增加自己的组件

在views目录下添加Goods.vue组件：

<template>
  商品详情页面
  <p>商品ID:{{ $route.params.gid }}</p>
</template>

1.7 在路由里面增加配置

在路由配置中添加新的路由项：

{ path: '/goods/:gid', name: 'Goods', component: () => import('../views/Goods.vue') }

1.8 在App.vue调用

在App.vue中添加新的链接：

<router-link to="/goods/1001">查看商品</router-link>

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