技术标签: vue工程化知识 前端 vue.js javascript
Vue
很适合用来构建单页面应用。对于大多数此类应用,都推荐使用官方支持的Vue Router
;在单页面应用(Single-page application)中,客户端的 JavaScript 可以拦截页面的跳转请求,动态获取新的数据,然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验,因为这类场景下用户通常会在很长的一段时间中做出多次交互。这类的单页面应用中,路由的更新是在客户端执行的。
Vue Router
是 Vue 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。功能包括:
我们来介绍Vue Router
的基本使用。以下我们分vue3+Typescript
项目和vue3+JS
项目进行引入介绍,以区分细微的差别。
对于vue3,我们推荐使用vue-router 4.x及以上版本。node环境安装如下:
npm install vue-router@4
在我们工程项目中,路由文件通常需要单独管理,以便于后续的使用以及维护。再此基础下,我们引入分为两步:
在与main.ts文件的同级目录下创建router文件夹,并添加index.ts文件(使用ts,若使用js也同理)。
文件内容如下:
import {
createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue";
// 项目其他页面路由(推荐使用)
import Practice from "../router/practiceFolder/practice";
// vue项目自带路由
const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/about",
name: "About",
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue")
}
];
const routers = [...routes, ...Practice];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes: [...routes, ...Practice]
});
export default router;
其中,使用RouteRecordRaw
声明的对象会被当做路由对象,放入到路由对象池里。
createRouter
创建路由;
createWebHistory
代表路由使用 HTML5 模式,也是推荐使用的模式;
代码如下:
import {
createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
createApp(App)
.use(store)
.use(router)
.mount("#app");
<script setup lang="ts">
import {
RouterView } from 'vue-router'
</script>
<template>
<RouterView />
</template>
├── public/ # 静态资源目录
├── src/
│ ├── assets/ # 全局资源目录
│ │ ├── fonts/
│ │ └── images/
│ │
│ ├── components/ # 全局组件
│ │ └── UserSelectTable/
│ │ ├── style/
│ │ │ ├── _var.scss
│ │ │ └── index.scss
│ │ ├── UserSelectTable.vue
│ │ └── index.ts
│ │
│ ├── store/ # 状态管理
│ │ ├── plugins/
│ │ │ ├── persist.ts
│ │ │ └── qiankun.ts
│ │ ├── modules/ # 除非业务过于复杂,否者不推荐
│ │ │ ├── cart.ts
│ │ │ └── products.ts
│ │ ├── getters.ts # 根级别的 getters
│ │ ├── actions.ts # 根级别的 action
│ │ ├── mutations.ts # 根级别的 mutation
│ │ └── index.ts
│ │
│ ├── router/
│ │ ├── routes.ts # 路由配置
│ │ └── index.ts
│ │
│ ├── views/ # 页面级组件
│ │ ├── Home/
│ │ │ ├── components/ # 页面级组件
│ │ │ ├── services/ # 页面级组数据请求
│ │ │ │ └── repo.ts
│ │ │ └── Home.vue
│ │ │
│ │ └── About/
│ │ ├── components/
│ │ └── About.vue
│ │
│ └── main.ts # 应用入口
│
├── .browserslistrc
├── .env
├── .editorconfig
├── .eslintrc.js
├── .prettierrc
├── babel.config.js
├── vue.config.js
├── jsconfig.json
└── package.json
router文件夹index.js
文件
import {
createRouter, createWebHistory } from "vue-router";
// 项目其他页面路由(推荐使用)
import Practice from "./practice/phonePractice.js";
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes: [...Practice]
});
export default router;
phonePractice.js
文件路由写法:
const routes = [
{
path: "/vuexPracitice",
name: "vuexPracitice",
component: () =>
import("../../views/phonePage/vuexPracitice.vue")
}
];
export default routes;
import {
createApp } from 'vue'
import App from './App.vue'
import store from "./store"
import router from './router'
const app = createApp(App)
app.use(store)
.use(router);
app.mount('#app')
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
至此,本地启动项目,访问:http://localhost:8080/vuexPracitice,则可访问到刚刚配置的路由。
router引入之后,我们可以通过router自带的组件来进行路由管理,以方便大型项目的路由访问以及统一管理。以下介绍常用的几种用法。
入之后我们单页面应用可以在app.vue
配置使用router-view
来切换页面,代码如下:
<template>
<router-view v-slot="{ Component }">
</router-view>
</template>
引入之后,在 Vue 实例中,你可以通过 $router
访问路由实例,若想要导航到不同的 URL,使用this.$router.push(...)
进行跳转
详细的router-view
使用方法可见vue router-view使用详解
当使用 <router-link>
时,内部会调用router.push(...)
这个方法,所以点击 <router-link :to="...">
相当于调用 router.push(...)
setup
中访问路由和当前路由因为我们在 setup
里面没有访问 this
,所以我们不能再直接访问 this.$router
或 this.$route
。作为替代,我们使用 useRouter
和 useRoute
函数:
import {
useRouter, useRoute } from 'vue-router'
export default {
setup() {
const router = useRouter()
const route = useRoute()
function pushWithQuery(query) {
router.push({
name: 'about',
query: {
...route.query,
},
})
}
},
}
除以上介绍的Vue Router
基本API,还有如下API可供使用:
本文参考官网,进行vue3路由配置实际操作,更加全面的使用请参考官网vue router。
文章浏览阅读673次。之前在网上看了很多Oracle的静默安装教程,感觉有些乱,经过自己查阅Oracle官网英文手册,结合在虚拟机中安装测试,整理出了这篇RedHat 7 静默安装Oracle 12c。redhat 6静默安装Oracle 11g R2也已基本整理好了,等有时间了再发出来。一、环境要求与准备1、硬件要求(1)磁盘空间EnterpriseEdition : 6.4GBStandardEdition : 6..._oracl12c redhat7 非图形界面安装
文章浏览阅读2k次。目录shell函数1.函数的作用2.函数的基本格式3.函数注意事项4.函数调用的方法5.函数的返回值6.函数的传参7.在外部调用函数8.函数变量的作用范围9.函数的递归shell函数1.函数的作用语句块定义成函数约等于别名,定义函数,再引用函数封装的可重复利用的具有特定功能的代码2.函数的基本格式法一:[function] 函数名 (){ 命令序列 [return x] #使用return或者exit可以显式的结束函数} 法二:函数名(){ 命令序列}3._shell脚本函数调用怎么写
文章浏览阅读157次。概念适配器模式(Adapater Pattern)是指将一个类的接口转换成用户期望的另一个接口,使原本接口不兼容的类可以一起工作,属于结构型设计模式。场景场景一已经存在的类的方法和需求不匹配(方法结果相同或者相似)的情况场景二适配器模式不是软件设计初始阶段考虑的设计模式,是随着软件的发展,由于不同的产品、不同的厂家造成功能类似而接口不同的问题的解决方法,有点亡羊补牢的感觉。生活中电源..._软件设计模式实验7适配器模式
文章浏览阅读180次。点击欧盟IT那些事关注我们公告:因企鹅审核规定,本公众号从《德国IT那些事》更名为《欧盟IT那些事》。你们要的比赛来了。宣传防骗,人人有责,让骗子无人可骗。近期在德国各地华人群中,频繁..._选帅哥大赛开始
文章浏览阅读1.9k次,点赞5次,收藏6次。根据RFC 6455标准,Websocket协议提供了一种标准化的方式在客户端和服务端之间通过TCP连接建立全双工、双向通信渠道。它是一种不同于HTTP的TCP协议,但是被设计为在HTTP基础上运行。Websocket交互始于HTTP请求,该请求会通过HTTPUpgrade请求头去升级请求,进而切换到Websocket协议。我们可以看到在该请求报文中有两个特殊的请求头,一个是Upgrade请求头,代表升级为websocket协议。还有一个是Connection请求头,代表升级连接。_qwebsocket的唯一标识
文章浏览阅读3.5k次。将hive数据 查询出结果保存在hdfs set mapred.reduce.tasks = 1;set mapred.job.name=recommend_$idate;insert overwrite directory '/user/client/' ROW FORMAT DELIMITED FIELDS TERMINATED BY '\t'select * from t..._经过hive计算后,写入到hdfs中的统计数据,想要展现给用户,最佳方式是什么
文章浏览阅读1.4k次,点赞2次,收藏19次。说明:CAS是国科大的简称,KG是知识图谱的缩写,这个栏目之下是我整理的国科大学习到的知识图谱的相关笔记。课程目标了解以知识图谱为代表的大数据知识工程的基本问题和方法掌握基于知识图谱的语义计算关键技术具备建立小型知识图谱并据此进行数据分析应用的能力教学安排详情请见博客:CAS-KG——课程安排文章目录..._部分完整性假设
文章浏览阅读3.3k次。网上有很多trace文件分析博客,但是都是解释anr发生得原因,没有指导anr文件如何着手分析?本篇文章就是讲trace文件怎么切入?_android trace文件分析
文章浏览阅读6.4w次,点赞29次,收藏61次。在命令行利用特殊符号变成代码图案各位博客们大家好啊,初次与大家会面,我就以图案的形式跟大家见面,接下来我会经常更新我个人的博客,提一些经常用到的技术点,也希望能够帮助大家在工作以及学习中有很好的帮助,也可以偷偷关注我哦,谢谢你们!!!在Linux登录时,你是否也想设置你想要的图案字符显示,他来了是不是心动了,如果你也拥有自己的主机,那赶紧行动起来把修改他的方法来了,修改/etc/motd配置文件可显示你想要的东西复制下面的符号字符,粘贴到/etc/motd配置文件就可以实现哦!1、机器人 _用符号拼出来的图案
文章浏览阅读932次。题目大意:定义一种串,如果一个串是另一个串的后缀,那么这个串称作kpm串。问一个串的标号第k大的kpm串是多少。思路:将所有的串翻转之后变成前缀,全都插进一个Trie树中。每个节点维护一个last指针,表示最后一次更新的可持久化线段树的指针,如果再有串经过这里,就继续更新last指针。最后只需要查询last指针中的东西就可以了。CODE:#include #inc
文章浏览阅读43次。imagemagick 这个软件很难下载旧的版本_imagemagick7.10版本
文章浏览阅读2.1w次,点赞11次,收藏8次。运行python文件出现 has no attribute ‘init’ 这个情况import pygamepygame.init()pygame.display.set_mode()pygame.quit()按视频的内容练习pygame的时候出现AttributeError: module 'pygame' has no attribute 'init'这个情况但是在po..._module 'pygame' has no attribute 'init