vue.js路由器基础技术
1. 路由基础
1.1 概念
硬件有路由的概念，在硬件上，从一组设备到另外一些访问路径的时候，需要通过一个工具的转发。后端项目也有路由的概念
页面1： http://192.168.0.1:8080/index.html
页面2： http://192.168.0.1:8080/about.html
页面3： http://192.168.0.1:8080/news.html
在地址栏通过url来查看页面解析，可以通过a到服务器之后，由服务器来判断，去哪里。
前端路由：
HTML5 history API,之前是哈希散列的方式，这个算法可以兼容低版本的浏览器。
http://192.168.0.1:8080/#/index.html
http://192.168.0.1:8080/#/about.html
http://192.168.0.1:8080/#/bews.html
WEB服务器不会解析#后面的内容，有js来获取#后面的内容，通过windows.location.hash来读取，然后匹配到不同的功能上。优点：哈希值改变后，不会导致浏览器的刷新。
1.2 使用路由
npm run vue-router
| import Vue from 'vue' //相当于加载vue.js // VueRouter类拿过来，从刚才下载的npm包 import VueRouter from 'vue-router' //加载一个组件HomeView import HomeView from '../views/HomeView.vue' //要使用这个路由，必须通过Vue.use()明确安装路由功能 Vue.use(VueRouter) |
因为我们使用了脚手架，配置放在/src/router/index.js文件中。在脚手架里面创建完毕路由对象之后，将路由配置文件引入到main.js,并注册到Vue实例上。注册完毕之后才可以使用路由的内置组件router-link和router-view，这两个组件可以进行页面跳转。
1.3 index.js研究
| //常量，es复数，可以定义一个多个路由子项；对应的是一个数组; //[],里面的格式：{ // path:'路径的地址',name:'名字小写',component:对应的组件; //} const routes = [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', component: () => import('../views/AboutView.vue') } ] |
.png)
1.4 App.vue
| <!-- 跳转路由的链接， to:跳转的地址,/默认index地址；/about; Home About,首字母大写; --> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </nav> <!-- 路由匹配的组件，渲染到router-view里面 --> <router-view /> |
1.5 整个逻辑图
.png)
1.6 增加自己的组件
在views下增加Goods.vue组件
| <template> <div> 商品详情页面 <p>商品ID:{{ $route.params.gid }}</p> </div> </template> |
1.7 在路由里面增加配置
| { path: '/goods/:gid', name: 'Goods', component: () => import('../views/Goods.vue') } |
1.8 在App.vue调用
| <router-link to="/goods/1001">查看商品</router-link> |
1.9 完毕之后，npm run serve测试运行
效果：.png)
1.10 理论的总结
注意在路由中，多段“路径参数”都放子啊$route.params,设置格式如下：
{gid:’1001’} 匹配路径 /goods/1001 模式 /goods/:gid
{type:’shoes’,gid:’1001’} 匹配路径 /goods/shoes/1001模式 /goods/:type/:gid
- 点赞
- 收藏
- 关注作者
评论（0）