vue--6.3 单文件组件与Vue中的路由

最新推荐文章于 2024-07-02 20:30:00 发布
最新推荐文章于 2024-07-02 20:30:00 发布
阅读量176 收藏
点赞数 1
分类专栏： 前端学习 Vue 文章标签： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ada_lake/article/details/90720555
版权

整体流程在这里插入图片描述main.js 是入口

+ el限定的范围就是index.html文件下的id为app的div

在这里插入图片描述
在这里插入图片描述文件以.vue结尾叫作单文件组件在这里插入图片描述

路由

根据网址的不同，返回不同的内容给用户在这里插入图片描述router是路由，来自同一文件下的router文件，即router文件下的index.js
index.js也是一个组件，当访问根目录时，会访

最低0.47元/天 解锁文章
有夏无夏
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue-cli3开发单文件组件
06-21
其中包含Vue基础API、Vue组件化开发、Vue组件通信、官方脚手架Vue-cli3的使用、Vue-devtools的使用 、element-ui第三方组件的使用、手把手带你打造自己的表单组件、Vue核心插件之vue-router和vuex、基于权限控制实现...
VUE-CLI/VUE-ROUTER
LKS_010620的博客
08-24 3676
官方文档vue-cli是vue官方出品的快速构建单页应用的脚手架，里面集成了webpack，npm，nodejs，babel，vue，vue-router。
（六）vue-router+UI组件库
释怀°Believe的博客
08-30 324
路由
Vue-Router4 学习笔记
zep
03-04 837
一、URL的hash 前端路由是如何做到URL和内容进行映射呢？监听URL的改变。 URL的hash也就是锚点(#), 本质上是改变window.location的href属性； 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新； hash的优势就是兼容性更好，在老版IE中都可以运行，但是缺陷是有一个#，显得不像一个真实的路径。 二、HTML5的History 三、认识vue-router Vue Router 是 Vue.js 的官方路由。它与 Vue.j
【vuejs】vue-router 之 addRoute 动态路由的应用总结
最新发布
工作的日常记录和平凡的生活分享
07-02 1573
Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用。它与 Vue.js 深度集成，让开发者能够轻松地构建具有复杂用户界面的单页面应用。Vue Router 允许你定义不同的路由，并通过 组件在应用中显示匹配的组件。Vue Router 的核心特性包括：Vue Router 的安装和基本使用步骤如下：对于 Vue 2，推荐使用 Vue Router 3.x 版本。可以通过 npm 或 yarn 进行安装： 1.2 项目中引入 Vue Router 在项目的入口文件（如 main.j
第九节：Vue-router 路由
qq_43220836的博客
09-02 368
Vue-router 路由
【VUE基础】Vue-Router
Robin的博客
10-18 1006
路由就是通过互联的网络把信息从源地址传送到目的地的活动路由提供了两种机制：路由和传送。
篇章十一 路由 Vue-router
虎康的博客
03-02 897
第6章：vue-router 6.1 相关理解 6.1.1 vue-router 的理解 vue的一个插件库，专门用来实现SPA应用 6.1.2 对SPA应用的理解 单页Web应用（single page web application，SPA）。 整个应用只有一个完整的页面（index.html）。 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。 数据需要通过 ajax 请求获取。 6.1.3 路由的理解 1. 什么是路由？ 一个路由就是一组映射关系（key - value） key 为路
Vue-cli(vue脚手架)上万字总结，超详细教程
热门推荐
weixin_45647685的博客
04-02 3万+
1、创建Vue脚手架 1.1、首先系统需要全局安装Vue脚手架 npm install -g @vue/cli 1.2、创建Vue脚手架工程 进入你想创建vue脚手架的目录，然后输入命令 vue create xxx项目名 需要注意的是工程名字不能大写，这里我们选择选择Vue2，敲下回车，那么vue将会为我们创建vue脚手架 显示如图所示说明创建成功 如图命令所示 我们进入myvue工程，执行命令 npm run serve 然后浏览器访问http://localhost:8080/ 到这
vue-popper：基于VueJS popover组件的popper.js
02-06
vue-popperjs 基于 popover组件 例 安装 CDN 推荐： : ，它将在发布到npm时立即反映最新版本。 您也可以在浏览npm软件包的源代码。 NPM npm install vue-popperjs --save 纱 yarn add vue-popperjs 凉亭 bower ...
vue-country-flag:国旗的Vue组件
05-01
为了将其与Vue 3配合使用，请按如下所示安装vue-country-flag-next软件包： npm install vue-country-flag-next Vue 2支持 如何安装 从NPM获取软件包： npm install vue-country-flag 如何使用组件 在您的应用...
前端html利用http-vue-loader以组件方式引入vue文件
06-15
Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件： http-vue-loader 这套工具可提供开发者直接在网页环境中载入 .Vue File，无需透过 nodeJS 环境编译，也不需要 ...
vue-auto-routing：自动生成Vue路由器路由
02-27
要使用此功能，请导入vue-auto-routing并将其传递到Vue Router构造函数选项中。 // Import generated routesimport routes from 'vue-auto-routing'import Vue from 'vue'import Router from 'vue-router'Vue . use...
使用Vue2+vue-router+vuex构建项目
zqqfives的博客
07-09 467
首先我们需要使用vue/cli来构建一个项目框架 vue create "项目名" 然后我们需要安装两个东西 //先通过npm来进行初始化项目 npm install //然后通过npm来安装 vue-router和vuex npm install -d vue-router npm install -d vuex 项目开始 我们要手动创建一个store的仓库文件夹和routers路由文件夹 我们要在main.js中引入这两个文件夹(如果不写文件名称的化自动匹配index.js) import
HTML引用外部css的路径
Ada_lake的博客
05-08 1万+
HTML引用外部css，其实说简单点就是 href 内填入路径即可 然而今天感觉自己之前都有点。。没引入进来就试出来的赶脚。。。 索性就把情况都归纳一下 1. html,css 在同一文件夹下 直接引用css的名字即可，因为在当前路径之下 2. html,css 在同一文件夹下 ，但！css在该文件夹的子！文件夹下 在引用css的名字前加上子文件夹名字即可，相当于顺着找就能找出这个css ...
uniapp -- 调用其他js
Ada_lake的博客
06-12 5947
步骤 保证要引入的js是模块化的 export default 模块导出 import XXX from ‘./common/XXX.js’ export 模块导出 import {XXX} from ‘./common/XXX.js’ commonjs、adm、cmd模块 模块化是什么 把系统分离成独立功能的方法，需要什么功能就加载什么功能 相互独立+可重复使用 ES6模块 – 用于浏览器环境【export+import】 1. 定义模块 – 输出模块 export default {name: 'X
响应式网页的字体大小呀~~~
Ada_lake的博客
11-05 5316
最近用响应式网页，会发现如果你将网页每个需要用的地方字体大小设为多少PX时，很有可能缩小页面字体会因为网页而出现排版不太好看的问题 这个时候。。。 如果你把font-size:不设为PX就好了嘛！ 那设为什么呢？大部分地方都会设为多少em，原谅我太懒，不想拿着计算器噼里啪啦。 那就设为rem好了。 rem是指根元素的字体大小，em是指父级元素字体的大小。 当把html{ font-
Jest与Vue-test-utils单元测试实战指南
Vue推荐使用Jest作为其单元测试的首选框架，因为Jest提供了vue-jest预处理器，可以处理大部分Vue单文件组件（SFCs）的需求。 为了在Vue项目中使用Jest和Vue-test-utils，首先需要确保安装了这两个库。如果使用Vue ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值