vue路由

一：<router-link v-if="item" class="g-color3" target="_blank" :to="{ name: 'partyactivitydetail', query : { id: item.id } }" > 接收：this.$route.query.id 路由为：/xx?id=1 二： <router-link :to="{name: 'newdetails', params : {id:o.id }}" target="_blank" class="g-color3" > 接收：this.$route.params.id; 路由为：/xx/xx/9340314401570816 来源： https://www.cnblogs.com/yyjspace/p/11645975.html

导入vue路由组件 import Vue from "vue"; import Router from "vue-router"; Vue.use(Router); 定义路由 export const routers =[ { path: "/group", component: () => import("./views/portal/Group/Index.vue"), //component: resolve => require([ '../pages/home.vue'], resolve), children: [ { path: "", component: () => import("./views/portal/Group/index/PartyGroup.vue") }, { path: "/details/:id/", name: "groupDetail", component: () => import("./views/portal/Group/index/PartyDetails.vue") } ] }, ]; 如果用import引入的话，当项目打包时路由里的所有component都会打包在一个js中，造成进入首页时，需要加载的内容过多，时间相对比较长。 当你用require这种方式引入的时候，会将你的component分别打包成不同的js

vue对比jquery vue ： mvvm 数据驱动影响视图 适用于复杂数据 jquery ： mvc 视图塞入数据 适用于复杂视图动效 （其实都是js 的封装，以及对html 的扩展） 相关指令 v-text 等同大胡子效果 但是会转换为字符串 v-html 绑定html属性 <div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1>菜鸟教程</h1>' } }) </script> v-if 三兄弟 只会渲染判断为真的 dom v-show 绑定值的布尔值来判断是否显示 会渲染整个 dom 只是会根据布尔只能判断是否增加 display none 这个内联样式 v-if 和 v-show 的区别： v-if 有更高的切换消耗； v-show 有更高的初始渲染消耗； v-if 适合运营条件不大可能改变； v-show 适合频繁切换 v-for : 循环 v-once 只会渲染一次 即使数据改变 v-bind 用来响应地更新html属性 使用场景：绑定接口请求得到的数据 简写： : ，可以绑定class和内联样式 <style> .class1 { background: #444; color: #eee; } </style>

转载自：https://www.cnblogs.com/aimeeblogs/p/9501490.html 如有侵权 联系删除 Vue.js面试题整理 一、什么是 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 区别？它和其它框架（ jquery ）的区别是什么？哪些场景适合？ mvc和 mvvm其实区别并不大

本次只是记录下开发中碰到的问题。 最近做一个活动页面，涉及到角色和权限的问题，需要跳转很多页面，于是vue-router走起，顺便keep-alive也用起来了，嗯，跳转的很爽，但是一个详情页面组件，被两个路由组件引用了，此时发现有一个路由在调用详情组件时没有按需求刷新，并且已经在keep-alive上设置了exclude，调试了半天不能解决问题，就用最笨的办法，把一个相同的页面写在两处，要求算是做完了，但是，看着这样的代码，总觉得不舒服，并且有改动的话要改两处，很容易遗漏，于是，研究了一下，之前也测试过，感觉就是是否新创建的问题 ，正好，看文档里面有 activated和deactivated两钩子。 说说我的总结吧： 在keep-alive组件中 在引用组件，并且通过props传值时，如果所传递的参数没有发生改变，那么子组件是不会更新的，并且，在子组件上可能还需要使用v-if来修饰，这样，就可以通过activated和deactivated这两 钩子来变化数据， 贴一下代码，相当于做个笔记 <template> <div class="my-family"v-if="team_id>0"> <FamilyItem :role="team_id" :team_id="team_id" :srouce="'other'"></FamilyItem> </div> <

　　 在 使用element中的menu组件时，根据官方文档，可以设置给 el-menu设置route属性为：true，给el-menu-item设置index的值为路径，就可以实现点击导航跳转到指定路由。 　　 这 样做虽然能实现跳转，并且通过父页面点击到其他页面的时候，选中的仍然是当前导航，比如导航列表：a、b，从b可以跳转c，跳转到c时，导航栏选中的是b，这样是符合我们的要求的， 但是 ，若刷新浏览器，则此时页面还停留在c的页面，导航却选中到a了（假设默认的选中项设置为a）。 为了解决这个问题，百度了很多，也有解决办法，那就是将default-active属性设置为：$route.path，这样页面重新渲染时就会选中当前的路由了。可是，解决了刷新的问题，前面说到的从b跳转到c，此时因为路由变了，找不到与index匹配的路由了，导航栏就不会再高亮了。 　　仔细读element官网上的menu属性，发现还有一个属性没用上，就是el-menu-item的router属性，它的值是vue router对象，通过尝试发现：default-active匹配的是index值，当将el-menu的route属性设置为true时，跳转的路由如果没有设置router，则使用的是index的值，如果写了router，则路由使用的是router的值，通过这一点儿特性，于是想了一个办法： 　

Vue 脚手架 脚手架 3 的版本 ---- webpack 4 cnpm install -g @vue/cli-----全局安装组件 vue create myapp-----命令行创建项目 或者使用 vue ui--------界面UI创建项目 脚手架 2 的版本 ---- webpack 3 npm install -g @vue/cli-init vue init webpack myapp2 数据的双向绑定 原理 1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。 2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。 3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。 基础用法 <div> {{ msg }} --- {{ num }} --- {{ flag }} --- {{ obj.a }} ---- {{ obj.b }} // 在dom中使用双大括号包裹变量，视图中就会渲染数据 </div> <div v-html="msg"></div> mag为data中申明的变量，是一个html格式 <div v-text="msg"></div> mag为data中申明的变量，是一个html格式 {{ sex == 0 ? '女' :

一、vue中路由的使用 1、定义组件 <template> <div class="hello"> <h1 @click="info" :class="color">{{ msg }}</h1> </div> </template> <script> export default { name: 'hello', data () { return { msg: '我是Hello组件', color:'color' } }, methods:{ info(){ console.log('你点击了我'); } } } </script> <style> .color{ color:#630; } </style> 2、配置路由文件 import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' import Word from '@/components/Word'; Vue.use(Router) export default new Router({ routes: [ { path: '/', component: Hello }, { path:'/index', component:Word } ] }) 3、配置路由插座<router-view><

什么是路由 vue路由是可以通过组件的形式把所有的组件组装成为一个应用程序，当我们需要的时候，将这个组件映射到路由，然后告诉Vue 我们在哪里渲染它们。 路由是我们浏览器的一个地址。 vue路由的优缺点 当我们加载一个程序时，由于它加载的内容特别多，所以会比较缓慢，但是我们加载完之后，我们到页面里进行切换，它的切换速度会变得特别快。原因是因为我们将所有的程序都放在一个页面里面了，我们将它加载时所有的功能所有的主键都加载到一个页面去了，所以它加载的速度特别慢，但是加载完之后我们再进行后续的操作时，它的切换速度和反应速度回特别快。 路由配置安装 路由最主要的配置是在于切换和跳转页面这两个方面。 路由配置 动态效果 命名路由 嵌套路由 <!DOCTYPE html> <html> <meta charset="utf-8"> <title>Vue 路由的配置</title> <head> <meta charset="utf-8"> <title>Vue 内置指令</title> <script src="Vue.min.js"></script> <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script> <script src="https://unpkg.com/vue-router@3.1.2/dist/vue

去除vue路由跳转地址栏后的哈希值#，我们只需要在路由跳转的管理文件router目录下的index.js中加上一句代码即可去掉哈希值# import Vue from 'vue' //1.引入vue-router import Router from 'vue-router' import find from '../components/find' import mall from '../components/mall' import microshop from '../components/microshop' import cloud from '../components/cloud' import personalcenter from '../components/personalcenter' //2.使用vue-router Vue.use(Router) //3.实例化router这个构造函数 let router = new Router({ //去掉地址中的哈希# mode:"history", //5.映射，什么样的地址跳转到什么样的page routes:[ { //根目录 path:'/', name:'首页', component:mall }, { //发现page path:'/find', name:'发现', component:find