vue路由 | 易学教程

LF项目

阅读更多关于 LF项目

传输使用vue自动化工具项目传输没有node_modules,需要在终端文件下 npm update 项目搭建创建项目目录 cd 项目目录 vue init webpack luffycity 运行项目打开项目已经，在pycharm的终端下运行vue项目，查看效果。 npm run dev 初始化项目 APP 改成空白页 <template> <div id="app"> </div> </template> <script> export default { name: 'App', components: { } } </script> <style> </style> 安装路由vue-router 下载路由组件 npm i vue-router -S 配置路由初始化路由对象在src目录下创建router路由目录，在router目录下创建index.js路由文件 index.js路由文件中，编写初始化路由对象的代码 . // 引入路由和vue模块，把路由模块注册vue项目中 import Vue from "vue"; import Router from "vue-router"; Vue.use(Router); // 引入组件 import Home from "../components/Home" // 编写路由列表提供给main.js进行初始化

Vue之Router

阅读更多关于 Vue之Router

单页面应用（只有一个主页面的应用）（一）mode（模式）　　（1）hash模式（默认模式）　　　　URL链接中的#符号（不是密码学中的散列运算）　　　　（如URL链接为 http://www.abc.com/#/hello ，hash 的值为 #/hello ）　　　　使用URL的hash来模拟一个完整的URL，当URL改变时，页面不会重新加载。　　　　　　（2）history模式　　　　当使用history模式时，URL就要像正常的url，如http://yoursite.com/user/id，但这需要后台支持。　　　　两种模式对比详解见文章：（ https://blog.csdn.net/lyn1772671980/article/details/80804419 ）详情见官网链接：（ https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90 ）（二）this.$route 和 this.$router 区别　　（1）this.$route 　　表示当前正在用于跳转的路由对象，可以调用其name、path、query、params等方法； console.log(this.

vue真实项目开发从0到1

阅读更多关于 vue真实项目开发从0到1

项目环境 node : 12.10.0 npm : 6.10.3 vue-cli : 2.x 1、使用normalize.css统一浏览器标签样式 npm i -S normalize.css main.js中引用： import 'normalize.css' 2、使用reset-css重置默认样式 npm i -S reset-css main.js中引用： import 'reset-css' 3、引入iconfont图标库这里我将阿里图标库放入到static/font目录下 main.js中引入： import '../static/font/iconfont.css' 即可在vue中通过class="iconfont iconxxx"进行使用 4、使用vue-cookies管理cookies npm i vue-cookies -S main.js中 import vueCookies from 'vue-cookies'; Vue.use(vueCookies ); 5、使用vue-router（cli已引入） router目录下我的结构如下： index.js // 路由入口文件 map // 路由 hooks // 路由钩子函数，用来鉴权 // index.js 路由入口文件，用于挂载路由和钩子 import Vue from 'vue'; import

Vue路由规则中定义参数

阅读更多关于 Vue路由规则中定义参数

Vue使用routerLinke定义参数的时候路由规则中不需要更改任何属性。路由其实就是我们在html中定义的锚点，点击这个连接跳转一个锚点。vue中的路由也是这个原理，前提是路由必须创建在实例之前。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> <script src="./lib/vue-router-3.0.1.js"></script> </head> <body> <div class="app"> <h1>{{msg}}</h1>  <router-link to="log?user=duwei&pass=123456">登录</router-link> <router-link to="zhuce"

web前端开发高级

阅读更多关于 web前端开发高级

前端高效开发框架技术与应用 Vue 基础 Vue 框架简介 MVX 模式介绍 Vue 框架概述如何使用 Vue.js 基础语法实例对象生命周期模板语法计算属性 Methods 方法渲染列表渲染条件渲染事件与表单事件处理事件对象事件委派表单处理 Vue 组件 Vue 组件概述组件对象剖析 Vue 组件的 data 属性 Props 传递数据事件通信父子组件事件通信非父子组件事件通信插槽组件类型双向绑定动态组件递归组件 Vue 工程化工具搭建 node 环境 Node.js 简介 Node.js 环境安装 npm 使用 yarn 使用使用 Vue CLI Vue CLI 简介 Vue CLI 使用 Vue 项目配置 JS 模块 CommonJS 模块 ES6 模块 vue-devtools 工作安装 vue-devtools 使用 vue-devtools Express 服务器开发第一个 node 应用程序创建 Express 应用程序 Express 路由 pug 视图模板请求响应对象处理 GET 请求和 POST 请求文件上传 Session 概述 Session 使用 Express 中使用 RESTful API 构建 RESTful API postman 工具规划目录结构 Nodemon 热刷新 axios

Vue知识点总结

阅读更多关于 Vue知识点总结

v-bind和v-model的区别 1.v-bind用来绑定数据和属性以及表达式，缩写为'：' 2.v-model使用在表单中，实现双向数据绑定的，在表单元素外使用不起作用什么是 mvvm？ MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的，因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 mvvm 和 mvc 区别？ mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller

Vue Day 06

阅读更多关于 Vue Day 06

一、Vue-Cli2 1.1runtime-compiler和runtime-only runtime-compiler：template->ast->render->vdom->ui runtime-only:render->vdom->ui 性能高，代码量少二、Vue-Cli3 2.1认识Vue CLI3 vue-cli 3 与 2 版本有很大区别 vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3 vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录 vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化移除了static文件夹，新增了public文件夹，并且index.html移动到public中三、Vue-router 3.1认识路由后端渲染（jsp）：服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示后端路由：当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户顿前端渲染：后端只提供API来返回数据 ,前端通过Ajax获取数据, 并且可以通过JavaScript将数据渲染到页面中前端路由：改变URL，但是页面不进行整体的刷新，一个URL对应一个组件在页面上渲染 3

vue面试

阅读更多关于 vue面试

第一部分： 1、active-class是哪个组件的属性？嵌套路由怎么定义？答：vue-router模块的router-link组件。 2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？答：在router目录下的index.js文件中，对path属性加上/:id。使用router对象的params.id 3、vue-router有哪几种导航钩子？答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件 4、scss是什么？安装使用的步骤是？有哪几大特性？答：预处理css，把css当前函数编写，定义变量,嵌套。先装css-loader、node-loader、sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓展:extenstion，再加多一个模块：module里面test、loader 4.1、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？答：css的预编译。使用步骤：第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）第二步：在build目录找到webpack.base.config.js

Vue项目环境搭建

阅读更多关于 Vue项目环境搭建

Vue项目环境搭建 """ node ~~ python：node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip：npm是一个终端应用商城，可以换国内源cnpm vue ~~ django：vue是用来搭建vue前端项目的 1) 安装node 官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/ 2) 换源安装cnpm >: npm install -g cnpm --registry=https://registry.npm.taobao.org 3) 安装vue项目脚手架 >: cnpm install -g @vue/cli 注：2或3终端安装失败时，可以清空 npm缓存再重复执行失败的步骤 npm cache clean --force """ Vue项目创建 1) 进入存放项目的目录 >: cd *** 2) 创建项目 >: vue create 项目名 3) 项目初始化 pycharm配置并启动vue项目 1) 用pycharm打开vue项目 2) 添加配置npm启动 vue项目目录结构分析 ├── v-proj | ├── node_modules // 当前项目所有依赖，一般不可以移植给其他电脑环境 | ├── public | | ├── favicon.ico // 标签图标 | | └──

[Vue] vue-router-interview

阅读更多关于 [Vue] vue-router-interview

1.vue-router 怎么重定向页面？路由中配置 redirect 属性使用路由的别名来完成重定向 2.vue-router 怎么配置 404 页面？ path: '*' ,放在最后一个 3.切换路由时，需要保存草稿的功能，怎么实现呢？ beforeDe beforeRouteLeave 4.vue-router 路由有几种模式？说说它们的区别？ hash 模式的特点 hash 表示的是地址栏 URL 中#符号(也称作为锚点), hash 虽然会出现在 URL 中, 但是不会被包含在 Http 请求中, 因此 hash 值改变不会重新加载页面.由于 hash 值变化不会引起浏览器向服务器发出请求, 而且 hash 改变会触发 hashchange 事件, 浏览器的进后退也能对其进行控制, 所以在 HTML5 之前, 基本都是使用 hash 来实现前端路由. history 模式的特点利用了 HTML5 新增的 pushState()和 replaceState()两个 api, 通过这两个 api 完成 URL 跳转不会重新加载页面.同时 history 模式解决了 hash 模式存在的问题. hash 的传参是基于 URL 的, 如果要传递复杂的数据, 会有体积限制, 5.说说你对 router-link 的了解 vue-router 插件的其中一个组件, 用于跳转路由

订阅 vue路由