Vue-路由-配置

1. VueRouter 的 使用 (5 + 2)

参考官网

5个基础步骤 (固定)

  1. 下载 VueRouter 模块到当前工程,这里指定版本:3.6.5
yarn add vue-router@3.6.5
  1. 引入 vue-router
import VueRouter from 'vue-router'
  1. 安装注册
Vue.use(VueRouter) // VueRouter插件初始化
  1. 创建路由对象
// 两种方式: 二选一// 创建了一个路由对象(不包含路由信息)
const router = new VueRouter()// 创建了一个路由对象(包含路由信息)
const router = new VueRouter({mode: 'history',routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ name: 'searchcc', path: '/search/:words?', component: Search },{ path: '*', component: NotFound }]
})
  1. 注入,将路由对象注入到new Vue实例中,建立关联
new Vue({render: h => h(App),router // 这里是简写;全写为:router: router
}).$mount('#app')

2 个核心步骤

  1. 创建需要的组件 (views目录),配置路由规则
import Home from '@/views/Home'
import Search from '@/views/Search'
import NotFound from '@/views/NotFound'import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化// 创建了一个路由对象
const router = new VueRouter({mode: 'history',routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ name: 'searchcc', path: '/search/:words?', component: Search },{ path: '*', component: NotFound }]
})
  1. 配置导航,配置路由出口(路径匹配的组件显示的位置)
<template><div><div class="footer_wrap"><!-- 配置导航,配置路由出口 --><router-link to="/find">发现音乐</router-link><router-link to="/my">我的音乐</router-link><router-link to="/friend">朋友</router-link></div><div class="top"><!-- 路由出口 → 匹配的组件所展示的位置 --><router-view></router-view></div></div>
</template>

2. 组件存放目录问题

组件分类:

  • 页面组件
  • 复用组价

存放原则:分类开来 更易维护

组件存放位置理由
页面组件src/views文件夹页面组件 - 页面展示 - 配合路由用
复用组件src/components文件夹复用组件 - 展示数据 - 常用于复用

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

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

相关文章

Unity Shader 属性的定义

Unity Shader 属性的定义 什么是材质球 人的衣服 什么是shader 决定材质跟灯光的作用 Property 若是把shader看作class&#xff0c;那么Property就可以看成成员变量 属性定义的通用格式 Properites{ Property[Property…] } ep:定义一个int&#xff1a; name("dis…

ODBC 在指定的DSN中,驱动程序和应用程序之间的体系结构不匹配

常规办法就是64位或32位匹配&#xff0c;如果解决不了&#xff0c;往下看。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓解决方案↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 解压AccessDatabaseEngine_X64.exe&#xf…

为什么选择Go语言编写网络应用程序

关注公众号【爱发白日梦的后端】分享技术干货、读书笔记、开源项目、实战经验、高效开发工具等&#xff0c;您的关注将是我的更新动力&#xff01; 作为一名后端开发者&#xff0c;你一定对选择合适的编程语言来编写网络应用程序非常重视。在众多的编程语言中&#xff0c;Go语言…

我在代码随想录|写代码Day7之454.四数相加II ,​ 383. 赎金信​,​ 15. 三数之和​

454.四数相加II 题目 解题思路 四个数字相加的和为0,我们要选俩数组,让他们的笛卡尔积储存在哈希表中,然后我们要找的是这俩数和的相反数,然后就是将后面俩数组相加在后面的数组和中找相反数. 383. 赎金信 解题思路 题目意思是让在字符串1中找到字母组成字符串2所以找字符串1…

弹性盒模型(Flexbox)

弹性盒模型&#xff08;Flexbox&#xff09;是一种用于布局和排列元素的CSS模块。它提供了一种灵活的方式来创建响应式的、可伸缩的布局&#xff0c;适应不同尺寸的屏幕和设备。 弹性盒模型通过定义容器&#xff08;父元素&#xff09;和其内部的弹性项目&#xff08;子元素&a…

设备树OF函数操作实验-读取设备节点的整型数组元素的属性

一. 简介 本文学习使用设备树操作 OF函数&#xff0c;读取设备节点的整型的属性值。 读取设备树文件 imx6ull-14x14-evk.dts 中一个设备节点的信息。这里读取 backlight设备节点的 brightness-levels属性值。 二. 读取设备节点的整型数组元素的属性 1. backlight设备节点信…

JPA查询PostgreSQL行排序问题

文章目录 问题处理PostgreSQL排序相关JPA相关介绍 问题 我们项目使用Spring Boot构建&#xff0c;使用JHipster生成业务代码&#xff0c;包含基础的增删改查代码使用PostgreSQL作为业务数据库&#xff0c;使用自动生成的JPA构建数据更新语查询在查询某个实体类的列表时&#x…

【无标题】关于异常处理容易犯的错

一般项目是方法打上 try…catch…捕获所有异常记录日志&#xff0c;有些会使用 AOP 来进行类似的“统一异常处理”。 其实&#xff0c;这种处理异常的方式非常不可取。那么今天&#xff0c;我就和你分享下不可取的原因、与异常处理相关的坑和最佳实践。 捕获和处理异常容易犯…

【PostgreSQL】数据查询-VALUES

PostgreSQL数据查询-VALUES PostgreSQL中VALUES提供了一种生成“常量表”的方法&#xff0c;该表可在查询中使用&#xff0c;而无需在磁盘上实际创建和填充表。语法是 VALUES ( expression [, ...] ) [, ...]每个带括号的表达式列表都会在表中生成一行。所有列表必须具有相同…

Springboot开发的大学生宿舍共享厨房系统宿舍自习室宿舍洗衣房系统寝室系统技术文档论文功能部分

第三章 本系统采用Java语言开发&#xff0c;后端使用springboot框架开发&#xff0c;使用MySQL数据库存储数据&#xff0c;前端使用jsp页面&#xff0c;前端框架使用响应式框架bootatrap布局。本章将简单介绍所使用的技术及其理论依据。 3.1springboot介绍 SpringBoot 是一个…

C#监听Dictionary、List的写入操作

前言 在开发中&#xff0c;对于内置值类型和string我们可以通过封装属性在Set中监听写入操作&#xff0c;但是对于Dictionary、List等就不能监听到Add、Remove等写入操作。 所以一般采取两种方式监听它们的读写操作&#xff0c;一种是封装操作方法&#xff0c;间接进行监听&am…

【Py/Java/C++三种语言详解】LeetCode每日一题240113【贪心】LeetCode2182、构建限制重复的字符串

文章目录 题目链接题目描述解题思路代码PythonJavaC时空复杂度 华为OD算法/大厂面试高频题算法练习冲刺训练 题目链接 LeetCode2182、构建限制重复的字符串 题目描述 给你一个字符串 s 和一个整数 repeatLimit &#xff0c;用 s 中的字符构造一个新字符串 repeatLimitedStri…

(南京观海微电子)——色温介绍

色温是表示光线中包含颜色成分的一个计量单位。从理论上说&#xff0c;黑体温度指绝对黑体从绝对零度&#xff08;&#xff0d;273℃&#xff09;开始加温后所呈现的颜色。黑体在受热后&#xff0c;逐渐由黑变红&#xff0c;转黄&#xff0c;发白&#xff0c;最后发出蓝色光。当…

im6ull学习总结(三-五)freetype显示正行字

知识补充 笛卡尔坐标系 这里笛卡尔坐标系就是初高中学的直角坐标系的第一象限 lcd坐标系则不同 这两个坐标系如何转换 观察两个坐标系 点&#xff08;x,y&#xff09;的x坐标在两个坐标系中相同&#xff0c;纵坐标&#xff08;y&#xff09;存在着yV-yV V是整个屏幕的行数的像…

MYSQL的操作

1.库的操作 1.1创建数据库 语法&#xff1a; CREATE DATABASE [IF NOT EXISTS] db_name [create_specification [, create_specification] ...] create_specification: [DEFAULT] CHARACTER SET charset_name [DEFAULT] COLLATE collation_name 说明&#xff1a; #…

python flask学生管理系统

预览 前端 jquery css html bootstrap: 4.x 后端 python: 3.6.x flask: 2.0.x 数据库 mysql: 5.7 学生管理模块 登录、退出查看个人信息、修改个人信息成绩查询查看已选课程选课、取消选课搜索课程课程列表分页功能 教师模块 登录、退出查看个人信息、修改个人信息录入…

leetcode 每日一题 2024年01月14日 删除排序链表中的重复元素

题目 83. 删除排序链表中的重复元素 给定一个已排序的链表的头 head &#xff0c; 删除所有重复的元素&#xff0c;使每个元素只出现一次 。返回 已排序的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,1,2] 输出&#xff1a;[1,2]示例 2&#xff1a; 输入&#xff…

解决Unexpected record signature 0X9maven 资源过滤

解决Unexpected record signature: 0X9|maven 资源过滤 记录问题&#xff1a;我们有个需求是根据excel模版导出一个excel表。我们的项目是SpringBoot&#xff0c;所以理所当然的把这个模版文件放到了&#xff0c;resources文件夹中。但是在导出文件的时候却遇到了invalid code …

二极管限幅电路理论分析,工作原理+作用

一、限幅是什么意思&#xff1f; 限幅也就是&#xff0c;将电压限制在某个范围内&#xff0c;去除交流信号的一部分但不会对波形的剩余部分造成影响。通常来说&#xff0c;限幅电路主要是由二极管构成&#xff0c;波形的形状取决于电路的配置和设计。二、限幅电路工作原…

场效应管在电路中如何控制电流大小

场效应管的概念 场效应晶体管&#xff08;FieldEffectTransistor缩写&#xff08;FET&#xff09;&#xff09;简称场效应管。主要有两种类型&#xff08;juncTIonFET—JFET&#xff09;和金属-氧化物半导体场效应管&#xff08;metal-oxidesemiconductorFET&#xff0c;简称M…