开发业务（6）——vue项目的route

大梁来了

于 2024-08-13 01:00:00 发布

阅读量926

点赞数 29

分类专栏：开发业务文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43435138/article/details/141101932

版权

开发业务专栏收录该内容

6 篇文章 0 订阅

订阅专栏

VUE里面的路由与SFC
路由配置对于大项目非常重要，通过路由管理可以实现超级多的.一般实现的方式有:

hash模式:通过监听hash值来执行对应的js来改变URL地址，在地址后面追加了一个#号，通过改变hash值的方式实现一个页面跳转的方式。hash指的是地址中#号以及后面的字符，也称为散列值。hash也称作锚点，本身是用来做页面跳转定位的。如http://localhost/index.html#abc，这里的#abc就是hash

history模式:美化后的hash模式，会去掉路径中的 “#”。依赖于Html5 的history，pushState API，包括back、forward、go三个方法，对应浏览器的前进，后退，跳转操作。就是浏览器左上角的前进、后退等按钮进行的操作

先来理解原理:
在html的单页面里面，我们在单页面通过埋在#的点里面的，实现点击网址里面出现
/mao.html#top 这样就直接从页面底部跳到页面顶部，很多包括章节和很长文章内部页面的标记，实现原理也是，在对应的a标签页面写个name 然后点击会跳转到对应的部分。这样就可以实现单页面，不断拉数据，实现翻页或者类似效果。

<!DOCTYPE html>
<html>
<body>
  <h2><a name="top">页面顶部</a></h2>
  <p>这是一些普通的文本内容。</p>
  <p><a href="#section1">跳转到章节 1</a></p>
  <h2><a name="section1">章节 1</a></h2>
  <p>这是章节 1 的内容。</p>
  <p><a href="#top">返回顶部</a></p>
</body>
</html>

理解vue里面的SFC
在上面例子里面，我们看到在简单html文件里面通过锚点实现了在一个页面只要不断拉API就可以完成项目的效果。而vue通过SFC将各个页面拼接成一个页面。从而实现访问的时候跳到指定页面。

在Vue中，单文件组件（Single File Components，简称SFC）通常包含三个部分：<template>、<script> 和 <style>。<template> 部分定义了组件的HTML结构。渲染函数是一个JavaScript函数，它返回虚拟DOM（Virtual DOM），Vue将使用这个虚拟DOM来更新真实DOM。以下是将 <template> 转换为 render 函数的基本步骤：

移除HTML注释：渲染函数不支持HTML注释，所以你需要将所有的注释移除。
转换元素和属性：将HTML元素和属性转换为JavaScript对象。元素名称转换为组件标签，属性转换为对象键值对。
处理绑定：将属性绑定（如 v-bind 或简写 :）和事件绑定（如 v-on 或简写 @）转换为相应的JavaScript表达式。
处理指令：将Vue指令（如 v-if、v-for、v-model 等）转换为相应的JavaScript逻辑。
处理插槽和组件：如果模板中包含插槽或子组件，你需要在渲染函数中相应地创建子组件实例或处理插槽内容。
返回虚拟DOM：最终，渲染函数应该返回一个描述虚拟DOM的JavaScript对象。

3.普通路由与哈希路由
普通路由 / 创建的时候使用
createWebHistory 使用该模式的时候，就跟我们平时访问访问一样，/index /login 发出的请求到了服务器的nginx那边，通过路由器的转发实现路由的识别和分发。这种模式有个大的隐患，就是当使用了伪静态的配置路由的时候，比如/api/index/test 本地把这个参数会被伪静态识别到index控制器，除非做非常复杂的分隔。大幅度增加路由的复杂度。这样的优势是可以不用单个文件打包巨大，可以将项目文件打包成多个，分摊主页的包的大小，还有一种好处是支持页面的静态化，对SEO方面比较友好。

const router = createRouter({
    history: createWebHistory(),
    routes: basicRoutes
})

在我们项目部署里面，我们更常用的是hash模式

const router = createRouter({
    history: createWebHashHistory(),
    routes: basicRoutes
})

所以我们是可以将生成的页面使用虚拟路由的模式在本地通过#实现。这样的好处有三个:
1.我们可以将项目打包到任意目录，会自动引用当前文件的东西，在上面模式里面，通常以根目录为基准
2.不干扰现有项目的路由配置，本来我们项目配置的好好的，有的项目是已经具备了线上线下现在需要根据API部署一个额外的关联项目，显然更改服务器上的路由是不明智的，所以最方便的是使用哈希模式
3.可以隐藏自己的远程访问链接，封装在自己的内部代码里面，否则每次点远程都会暴露远程服务器的URL

4.vue的路由库

//导入vue-router的模块
import { createRouter, createWebHashHistory } from 'vue-router'
//一般我们到路由数组里面配置路由专门管理
import { basicRoutes } from '@/router/modules/basicRouter'
//创建一个路由对象
const router = createRouter({
    history: createWebHashHistory(),
    routes: basicRoutes
})
//对外导出该路由
export default router

基础路由相关数组: basicRoutes.js的代码 vue里面导出数组的export const 对外开放常量，处理了逻辑上面的router 也对外开放导出。一般是在main.js初始化的时候

export const basicRoutes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        name: 'home',
        meta: {
            title: '首页'
        },
        hidden: false,
        component: () => import('@/views/home/index.vue')
    }

]

路由的使用:main.js初始化的时候直接use即可
import router from ‘./router’
const app = createApp(App)
app.use(router)

这样就完成了前端路由的定义和跳转，剩下的是对接远程API，来改变当前的页面。

大梁来了

关注

29
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
0
评论
开发业务（6）——vue项目的route

createWebHistory 使用该模式的时候，就跟我们平时访问访问一样，/index /login 发出的请求到了服务器的nginx那边，通过路由器的转发实现路由的识别和分发。hash也称作锚点，本身是用来做页面跳转定位的。2.不干扰现有项目的路由配置，本来我们项目配置的好好的，有的项目是已经具备了线上线下现在需要根据API部署一个额外的关联项目，显然更改服务器上的路由是不明智的，所以最方便的是使用哈希模式。在html的单页面里面，我们在单页面通过埋在#的点里面的，实现点击网址里面出现。
复制链接

扫一扫