vue.js路由配置和设置技术

Posted 2022-04-20 tea_year

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.3index.js研究
//常量，es复数，可以定义一个多个路由子项；对应的是一个数组;
//[],里面的格式：
// path:‘路径的地址’,name:‘名字小写’,component:对应的组件;

//
const routes = [

 path: '/',
 name: 'home',
 component: HomeView
 ,
 
 path: '/about',
 name: 'about',
 component: () => import('../views/AboutView.vue')
 
]

1.4App.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整个逻辑图

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测试运行
效果：

1.10理论的总结
注意在路由中，多段“路径参数”都放子啊$route.params,设置格式如下：
gid:’1001’ 匹配路径 /goods/1001 模式 /goods/:gid
type:’shoes’,gid:’1001’ 匹配路径 /goods/shoes/1001模式 /goods/:type/:gid