vue路由 | 易学教程

vue04

阅读更多关于 vue04

目录 Vue项目环境项目的创建 vue根据配置重新构建依赖 pycharm管理vue项目 vue项目目录结构分析 vue项目生命周期 views文件夹内的.vue文件介绍配置自定义全局样式导航栏组件及路由逻辑跳转路由重定向组件的生命周期钩子课程主页渲染路由传参 Vue项目环境 """ vue ~~ Django 框架 node ~~ Python 通过node就可以给电脑下载Vue环境，node解释执行js语法 npm ~~ pip node自带npm商城，下载 """ node语言是C++写的，python语言是C写的首先，下载node环境：下载node解释器：点我下载安装时选择AddtoPath,添加环境变量，其他无需操作，直接next即可；查看node版本号： C:\Users\Administrator>node --version v12.14.0 查看node安装的所有包： C:\Users\Administrator>npm list C:\Users\Administrator `-- (empty) 查看npm的版本号： C:\Users\Administrator>npm --version 6.13.4 更改镜像源（npm走的是国外的源，现在改成cnpm，走国内的淘宝源；）： npm install -g cnpm -

vue3

阅读更多关于 vue3

复习 """ 1、指令： v-once: <p v-once>{{ msg }}</p> v-cloak: 防止页面加载抖动 v-show：绑定的变量为布尔类型 <p v-show="isShow">{{ msg }}</p>，隐藏时，任然在页面中通过display:none渲染 v-if|v-else-if|v-else: 前分支成立会屏蔽后分支，else分支不需要条件 v-if="showBox == 'rBox'" v-for：遍历字符串: v-for="(ch, index) in str" 数组：v-for="(ele, index) in arr" 对象：v-for="(value, key, index) in obj" 2、实例成员： computed: 设置方法属性，该方法属性在页面渲染后，绑定的方法中任意变量发生改变(都被监听)，都会回调绑定的方法 - 一个变量依赖多个变量 computed:{ fullName() { return this.firstName + this.lastName; } } watch: 设置已有属性的监听事件，监听的变量值改变就会回调绑定的方法 - 多个变量依赖一个变量 watch:{ fullName() { this.firstName = this.fullName.split('')[0]; this

聊聊 Vue 中 title 的动态修改

阅读更多关于聊聊 Vue 中 title 的动态修改

由于之前的 Vue 项目打包成果物一直是嵌入集成平台中，所以一直没有关注过项目的 title。直到最近，突然有个需求，要求点击按钮在集成平台外新开一个页面，此时我才发现，原来我的项目的 title 一直是万年不变的 vue-project 。理所应当的，这个问题被测试爸爸提了一个大大的缺陷。犯了错的我赶紧解决这个问题，但是经过一段时间的摸索，我却发现，这一个小小的问题，却有着很多不同的解法。首先，毫无疑问的是，我们应该使用 document.title 方法通过 DOM 操作来修改 title 的值。此时，距离解决问题还差两步：如何传递 title？何时修改 title？ ps：很多人提到过在微信或者一部分 IOS webview （下文一律以微信指代）中无法通过 document.title 方法修改 title 的值，这个问题的解决方案在文末的彩蛋中会提及。 title 的传递接下来进入第一个重点：title 的传递。根据传递 title 值的方式，分为两种方案：全局变量传递路由传递何为全局变量传递？全局变量传递指的是所有页面维护同一个全局变量，切换页面对其重新赋值，最常见的方法是使用 Vuex，当然，如果你要使用 this.$root 甚至丧心病狂地想要使用 provide/inject 一样可以达到类似的效果。路由传递的方法就比较容易理解了

Vue（踩坑）vue.esm.js?efeb:628 [Vue warn]: Error in render: \"TypeError: Cannot read property 'length' of undefined\" found in

阅读更多关于 Vue（踩坑）vue.esm.js?efeb:628 [Vue warn]: Error in render: \"TypeError: Cannot read property 'length' of undefined\" found in

1、项目报错如下： 2、先访问别的路由，在访问这个页面的路由这样不报错，但是我直接在这个页面上刷新就报错 3、分析解决： 1）找到我的length出现的地方，说出错说明现在info里面是空的　　　　　　2）先进入其他路由---在进入当前路由---------此时我的info已经拿到了，vuex里面存的不是空对象了, 这种方式不会报错　　　　　　3）直接在这个页面刷，当前路由对象就会创建，第一次显示的时候vuex里面是空的，所以会报错。 4、用户可能从两个地方访问这个路由组件，下面是考虑两种方式进来的代码 mounted(){ //方式一：从别的路由组件切换过来走这里 new BScroll('.shop-info') if(!this.info.pics) return new BScroll('.pic-wrapper',{ scrollX:true }) const liWidth = 120; const space = 6; const objUl = this.$refs.picsUl; objUl.style.width = (liWidth + space)*this.info.pics.length - space + 'px' }, //方式二：用watch监视到当前vuex里面的info有数据了才执行后面的 watch:{ //在当前组件刷新 info(

Vue-路由2 给路由传参

阅读更多关于 Vue-路由2 给路由传参

Vue-路由2 给路由传参一、方式1—通过?传递参数实质在url中通过 ? 给路由对应的组件传递参数的方式，vue实例会将传递的参数放在$route.query对象中。注意：通过?的方式传递参数时，不用修改路由实例中的routes中对象的path路径在path对应组件中通过 this.$route.query.参数来获取传递的参数这种传参方式的参数可以不传，仍然可以访问到对应组件代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="../lib/vue.js"></script> <script src="../lib/vue-router.js"></script> </head> <body> <div id="app">   <router-link to="/login?name=Seven">登录</router-link> <router-link to="/register">注册</router-link>  <router-view></router-view> </div> <script> //

第七章路由 77 路由-使用children属性实现路由嵌套

阅读更多关于第七章路由 77 路由-使用children属性实现路由嵌套

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9  10 <script src=" https://cdn.jsdelivr.net/npm/vue"></script> 11 <script src="../lib/vue-router-3.0.6.js"></script> 12 </head> 13 14 <body> 15 <div id="app"> 16 <router-link to="/account">Account</router-link> 17 <router-view></router-view> 18 19 </div> 20 21 <template id="tmp1"> 22 <div> 23 <h1>这是 Account 组件</h1> 24 25 <router-link to="/account/login"

vue常用操作及学习笔记（路由跳转及路由传参篇）

阅读更多关于 vue常用操作及学习笔记（路由跳转及路由传参篇）

路由跳转 - 超链接方式跳转 html： <div id="app"> <h1>Hello App!</h1> <p>    <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p>   <router-view></router-view> </div> router.js： import Vue from 'vue'; import vueRouter from 'vue-router'; Vue.use(vueRouter); // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter) // 1. 定义（路由）组件。 // 也可以从其他文件 import 进来 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>'

Vue 路由配置

阅读更多关于 Vue 路由配置

注意：vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。推荐使用npm安装。一、使用路由在main.js中，需要明确安装路由功能： 1.定义组件，这里使用从其他文件import进来 3.创建 router 实例，然后传 routes 配置 4.创建和挂载根实例。通过 router 配置参数注入路由，从而让整个应用都有路由功能经过上面的配置之后呢，路由匹配到的组件将会渲染到App.vue里的<router-view></router-view> 那么这个App.vue里应该这样写： index.html里呢要这样写：这样就会把渲染出来的页面挂载到这个id为app的div里了。二、重定向 redirect 三、嵌套路由通过/index/info就可以访问到info组件了四、懒加载通过懒加载就不会一次性把所有组件都加载进来，而是当你访问到那个组件的时候才会加载那一个。对于组件比较多的应用会提高首次加载速度。五、<router-link> 在vue-router 1中，使用的是在vue-router 2中，使用了<router-link></router-link>替换1版本中的a标签六、路由信息对象 1.$route.path 字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo

vue全家桶(Vue+Vue-router+Vuex+axios)（Vue+webpack项目实战系列之二）

阅读更多关于 vue全家桶(Vue+Vue-router+Vuex+axios)（Vue+webpack项目实战系列之二）

Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了，直奔主题。一、Vue 　　系列一已经用vue-cli搭建了Vue项目，此处就不赘述了。二、Vue-router 　　Vue的路由，先献上文档（ https://router.vuejs.org/zh-cn/ ）。　　路由在全家桶里面定位是什么呢，创建单页应用！简单！我们知道Vuejs是一系列的组件组成应用，既然是组件那么就需要组合起来，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们！　　我们一般在APP.VUE文件里面使用router-view来告诉router在哪里渲染组件，如下图（keep-alive被我注释了后续系列继续讲）：　　　　组件的配置：（此处有多个文件夹是便于管理大的项目，模块化。对于小项目可以只要router下面的index.js就行）。　　至于路由配置中的resolve和require还有export default可以参考这篇文章（ http://www.cnblogs.com/Nutrient-rich/p/7047877.html 和 Vue按需加载提升用户体验）　　　　路由按照上面的写法就配置好了各个路由，那么在页面之间需要路由跳转怎么做呢$router.push()和$router.replace()就能做到了。　　　

Vue --- 项目创建

阅读更多关于 Vue --- 项目创建

目录创建Vue项目之前的准备创建Vue项目重新构建项目项目目录介绍项目的生命周期 Vue文件式组件配置自定义全局样式路由逻辑跳转生命周期钩子路由传参的两种方式创建Vue项目之前的准备 1.安装node 官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/ 2.安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 3.安装脚手架 cnpm install -g @vue/cli 4.清空缓存 npm cache clean --force 创建Vue项目第一种： 1.创建一个新的Vue项目 # 切换到指定的文件夹下 >>> vue create 项目名 # 可以使用 - 2.进入之后使用自定义 3.使用pycharm打开新建的项目 4.使用pycharm启动项目 5.安装pycharm中的vue插件第二种 1.打开cmd C:\Users\Wang Hongkun>vue ui 2.会出现以下的页面，按照指示创建 3.使用cmd启动项目 npm run serve / ctrl+c // 要提前进入项目根目录重新构建项目 1.将之前建立的项目种的public，src文件夹和package.json三个文件拷贝到新的文件夹下，再下载新的依赖

订阅 vue路由