本章节我们将为大家介绍 Vue.js 路由。Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页Web应用eb application，SPA）。Vue.js 路由需要载入。
原创
2024-10-14 09:52:37
32阅读
注意：执行以下操作时提前安装node.js。如何安装请看俺的node.js学习路程。1.安装vue命令行工具
原创
2022-10-14 16:11:24
105阅读
路由的参数设置是路由的反斜杠加冒号，如下代码：import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path
转载
2023-07-06 15:22:10
554阅读
# Vue.js 动态改变 Data
Vue.js 是一款流行的 JavaScript 框架，常用于构建交互式的前端应用程序。它采用了数据驱动的方式，通过声明式的语法将数据绑定到 DOM 元素上。在 Vue.js 中，我们可以动态地改变数据，以实现响应式的界面更新。
本文将介绍如何在 Vue.js 中动态改变数据，并提供相应的代码示例。
## 1. Vue.js 基本概念
在开始之前，我们
原创
2023-09-12 11:57:40
625阅读
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。 Vue.js 路由需要载入 vue-router 库 中文文档地址：vue-router文档。 一、安装 1、直接下载 / CDN https://unpkg.com/vue-router/dist...
转载
2020-05-20 14:15:00
131阅读
2评论
vue中路由跳转及传参（以下仅仅是根据我个人的学习与理解编辑） 一：跳转有2种 1.方式一： router-link to 的方式 2.方式二： this.$router.push 的方式 二：传参有2种 1.方式一： params 配合命名路由 name 的方式 ---->参数不会显示在地址栏 pa
转载
2023-06-05 23:44:15
244阅读
一、Vue中的vue-router(路由)的使用
基本使用
一个路由（route）就是一组映射关系（key-value）,多个路由需要路由器（router）进行管理
前端路由：key是路径，value是组件
安装vue-router:npm i vue-router
应用插件：Vue.use（VueRouter）二、修改main.js文件
//引入Vue
import Vue from 'vue'
转载
2023-05-22 14:59:57
293阅读
使用v-bind：class或者v-bind:style或者直接通过操作dom来对其样式进行更改；1.v-bind:class || v-bind:style其中v-bind是指令，: 后面的class 和style是参数，而class之后的指在vue的官方文档里被称为'指令预期值'（这个不必深究，反正个人觉得初学知道他叫啥名有啥用就好了）同v-bind的大多数指令（部分特殊指令如V-for除外）
转载
2024-05-08 11:57:47
178阅读
VUE 路由参数改变重新刷新数据 App.vue 里面使用路由，然后通过App.vue文件中的搜索功能搜索刷新路由文件中的列表。 修改 index.js 文件 首先在路由文件 index.js 文件中添加几行代码： 这几行代码保证我们在当前路由页面下再次跳转到这个路由不会出错。 修改 App.vue
原创
2022-06-23 12:10:25
5990阅读
在 App.vue文件添加以下代码: mounted() { // 检测浏览器路由改变页面不刷新问题,hash模式的工作原理是hashchange事件 window.addEventListener('hashchange', () => { let currentPath = window.loc ...
转载
2021-08-23 18:29:00
1939阅读
2评论
动态路由：我们经常需要把某种模式匹配道德所有路由，全都映射到同一个组件。例如我们有一个user组件，对于所有id不同的用户又要使用这个组件来渲染。一个路径参数使用冒号标记动态路由使用方法：```jsconst router =new VueRouter({
routes:[
{path:'/user/:id/:name/:age',component:user}
]
})```创建vue：
转载
2023-06-16 15:34:08
120阅读
官方文档：https://router.vuejs.org/zh/installation.html
原创
2023-05-16 00:09:28
325阅读
vue本身并没有提供路由机制，但是官方以插件得形式提供了对路由得支持，可以使用vue脚手架包去创建一个webpack应用，在创建时可以选择支持路由功能，这样创建得webpack应用在根目录下的src文件夹中会有一个router文件夹，文件夹中有一个index.js文件在入口文件main.js中导入r ...
转载
2021-10-29 21:39:00
221阅读
2评论
setup() {
const rotate = ref<number>(0);
const color: string = "red";
const changeStatus = (): void => {
rotate.value = -90;
};
return {
rotate,
color,
转载
2023-06-03 15:49:06
532阅读
一、 目标：vue 实现多个盒子（用户根据实际场景决定盒子数量）自由拖拽，改变宽度。二、应用场景：可自由拖动宽度的多栏布局。最典型的案例：编辑器（eg:vscode,idea等）下图为本人在项目中引用封装的组件实现的效果：三、组件设计由于该组件盒子数量不确定，所以我们设计组件时参考了Vuetify中的Form和FormItem的设计。即：外层大盒子处理分发的拖拽事件，里层的盒子负责展示各个Item
转载
2024-04-05 00:36:16
210阅读
上文介绍了 自定义拖拽组件的样式 的简单实现，本文将继续给大家分享如何拖拽改变 元件位置，文中通过示例代码介绍，感兴趣的小伙伴们可以了解一下本文主要介绍了选中元件后拖拽围绕着元件的点，变更元件的位置、大小，具体如下：效果图实现过程：控制点需要对元件进行绝对定位，定位到元素的周围给控制点设置鼠标样式给每个控制点绑定 mousedown 事件在每个控制点的身上按下的时候，记录元件的初始信息和鼠标按下时
转载
2024-06-04 11:27:04
120阅读
在设置好样式后，可以通过代码来动态改变页面中的元素显示样式。 一个两数相除的例子，在除数输入了0则为红色报警大字体加粗显示，如果结果大于等于0则为蓝色，小于0则为绿色显示。 就像下面的样式： 第一种实现代码：（普通方式）<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=
转载
2024-08-16 23:13:09
87阅读
1、router-link （声明式路由）1. 不带参数
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
2.带
转载
2024-08-01 12:41:01
499阅读
路由组件耦合接收参数方式通过路由传参时，h:"/myPaht", component:MyC
原创
2023-06-28 14:15:08
110阅读
在前端 Vue 3 + JavaScript 项目中，路由配置主要使用 vue-router 库。以下是详细的路由配置流程：1. 项目初始化首先确保你已经创建了一个 Vue 3 项目。如果还没有创建，可以使用 Vue CLI 或 Vite 来创建项目。使用 Vite 创建项目bashnpm init vite@latest my-vue3-project -- --templa
