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

浅浅的花香味﹌ 2023-09-29 10:56 15阅读 0赞

**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

<router-link to="/">Home</router-link> |
     <router-link to="/about">About</router-link>
     </nav>
     
    <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测试运行**  
效果：![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAdGVhX3llYXI_size_13_color_FFFFFF_t_70_g_se_x_16]

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

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAdGVhX3llYXI_size_13_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ca9ece2c1bd8402e8d6b358454f29dcb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAdGVhX3llYXI=,size_13,color_FFFFFF,t_70,g_se,x_16