Vue-关于路由规则模块的封装

路由的封装抽离

对路由的封装进行封装,方便main.js文件维护

首先:

我们需要再src文件夹中创建一个router文件夹,在里面在创建一个index.js文件夹。

在这里插入图片描述


然后:

我们再index.js文件夹中进行封装路由规则

import Find from '@/views/Find'
import My from '@/views/My'
import Friend from '@/views/Friend'import Vue from 'vue'                 //得到构造函数Vue
import VueRouter from 'vue-router'   //得到构造函数VueRouter
Vue.use(VueRouter)  //VueRouter插件初始化const router = new VueRouter({// 配置路由规则routes: [{ path: '/find', component: Find},{ path: '/my', component: My},{ path: '/friend', component: Friend},]
})// 导出router配置
export default router
  • 注意,在index.js文件夹中是没有Vue 和 VueRouter构造函数的。

  • 这里我们就需要自己导入这两个构造函数

    1.导入Vue构造函数
    import Vue from 'vue'2.导入VueRouter构造函数
    import VueRouter from 'vue-router'
    

最后:

我们需要在main.js中导入实例对象 router

import router from './router/index'new Vue({render: h => h(App),router  //简写 键是固定的,值可以自己创建
}).$mount('#app')

拓展:

在Vue中,文件夹和文件的嵌套让我们对文件路径的书写比较繁琐

我们官方给我们提供了一个绝对路径的符号,@

@: 就是根目录src @ === src (但是不能直接写src)

  • 例如:

import App from '@/App.vue'


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/93983.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker切换文件系统为VFS

一、介绍 Docker支持AUFS、Btrfs、Device Mapper、OverlayFS、VFS、ZFS六种不同的存储驱动。 1. AUFS AUFS是一种常见的存储驱动程序,它也使用了Linux内核的AUFS文件系统。它的优点是支持所有的Linux发行版,可以在不同的容器之间共享文件系统&#xf…

《Go 语言第一课》课程学习笔记(十三)

方法 认识 Go 方法 Go 语言从设计伊始,就不支持经典的面向对象语法元素,比如类、对象、继承,等等,但 Go 语言仍保留了名为“方法(method)”的语法元素。当然,Go 语言中的方法和面向对象中的方…

自动驾驶攻城战,华为小鹏先亮剑

点击关注 文|刘俊宏 编|苏扬、王一粟 本文为光锥智能x腾讯科技联合出品 2023年过半,城市NOA(城市领航辅助驾驶)的元年如预期中到来了吗? 8月25日,成都车展开幕,与4个月之前的上海…

——滑动窗口

滑动窗口 所谓滑动窗口,就是不断的调节子序列的起始位置和终止位置,从而得出我们要想的结果。也可以理解为一种双指针的做法。 leetcode76 class Solution {public String minWindow(String s, String t) {char[] schars s.toCharArray();char[] tc…

undolog

一、原子性 ACID:通过undolog保证原子性 二、undolog 如何做 把回滚时所需的东西都给记下来: 1、插入一条记录时,至少要把这条记录的主键值记下来,回滚的时候只需要把这个主键值对应的记录删掉就好了。 2、删除了一条记录&…

基于Vue前端框架构建BI应用程序

一、什么是Vue? Vue(Vue.js)是一个轻量级、高性能、可组件化的MVVM库。简而言之,是一个构建数据驱动的web界面的渐进式框架。它采用MVVM思想,通过数据双向绑定实现数据的动态渲染,同时也支持组件化的开发方…

IO模型和NGINX安装升级

IO模型和NGINX安装升级 IO模型 IO概念 I/O在计算机中指Input/Output, IOPS (Input/Output Per Second)即每秒的输入输出量(或读写次数),是衡量磁盘性能的主要指标之一。 Linux的IO类型 磁盘I/O 磁盘I/O是进程向内核发起系统调用,请求磁…

ceph中PGLog处理流程

ceph的PGLog是由PG来维护,记录了该PG的所有操作,其作用类似于数据库里的undo log。PGLog通常只保存近千条的操作记录(默认是3000条, 由osd_min_pg_log_entries指定),但是当PG处于降级状态时,就会保存更多的日志&#x…

sql各种注入案例

目录 1.报错注入七大常用函数 1)ST_LatFromGeoHash (mysql>5.7.x) 2)ST_LongFromGeoHash &#xff08;mysql>5.7.x&#xff09; 3)GTID (MySQL > 5.6.X - 显错<200) 3.1 GTID 3.2 函数详解 3.3 注入过程( payload ) 4)ST_Pointfromgeohash (mysql>5.…

gitee上传本地项目bug

&#x1f92e;这个破bug不知道浪费了多长时间&#xff0c;以前没有记录&#xff0c;每次都忘记&#xff0c;这次记下来 问题描述 gitee创建仓库&#xff0c;然后根据它提示的如下命令&#xff0c;但一直报错 原因分析&#xff1a; 把命令复制出来&#xff0c;粘贴到Sublime …

【C++进阶】模板进阶

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前学习C和算法 ✈️专栏&#xff1a;C航路 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章对你有帮助的话 欢迎 评论&#x1f4ac; 点赞&#x1…

tableau基础学习2:时间序列数据预处理与绘图

文章目录 数据预处理1. 原始数据2. 合并数据集2. 创建计算字段 绘图分析1. 趋势分析2. 计算字段趋势分析 这一部分&#xff0c;我们记录一些分析时序趋势的分析步骤 数据预处理 1. 原始数据 原始数据是excel表格&#xff0c;其中包含三个Sheet页&#xff0c; 这里我们选择两…