vue路由

单选/复选 <div id="app"> <!--checkbox需要给每个复选双向绑定同一个数据，并添加value值， 点击某个复选时就会把该复选的value值添加到数据里，复选显示选中状态，再点击移除该数据显示未选中状态--> 喜欢谁？<input type="checkbox" v-model="a" value="北京">北京 <input type="checkbox" v-model="a" value="天津">天津 <input type="checkbox" v-model="a" value="上海">上海 {{a}} </div> <script> var vm=new Vue({el:"#app", data:{a:[]}}) </script> 单选框也这么写 - vuetools工具 下载工具地址https://github.com/arcliang/Vue-Devtools- 通过git下载到本地 打开谷歌浏览器-更多工具-扩展程序。直接将Chrome文件夹拖拽到扩展程序区域，浏览器会自动识别安装 右上角会出现灰色vue图标，以后运行vue程序时他就会亮了 使用 控制台会出现vue项，点击其中的root会看到所有挂在根实例上的内容vue中的动态绑定 <img :src="item.img" alt="">这样动态绑定的右边是变量

1.路由 注意 2.安装 npm install vue-router --save 3.在项目中使用它，明确的通过Vue.use()安装路由功能 import VueRouter from 'vue-router' Vue.use(VueRouter) 4.创建路由 //创建路由 const router=new VueRouter({ routes:[ { path:"/", name:"HelloWorld", component:HelloWorld } ] }) 5.给出路由显示的位置 <router-view /> 6.将路由对象注入new实例对象中 new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) 实例------------------------------------------------------------------------------------------------------------------------------ // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in

　　有些时候，我们需要实时的检测网址，来进行判断，操作，处理等等 　　我们需要使用 watch 的监视器，然后直接进行操作 　　我们需要 ’$route.path‘ 属性来进行监听，且需要加引号，然后只要页面一发生改变，我们就能实时的捕获到页面的路由了 　　 　　但有时我们也需要在 created(){} 的生命周期中，来对 this.$route.path 路由进行处理，来防止，刚开始打开页面，无法显示的问题 来源： https://www.cnblogs.com/shangjun6/p/11332715.html

路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。 点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。 路由中有三个基本的概念 route, routes, router。 1， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。 2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}] 3， router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。这篇文章知识将路由基础知识按照下面的图解来学习梳理。 项目注入 项目主文件 main.js 注册 router 文件 // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import './assets/variables.styl' import './assets/base.styl' import App from './App' import router from './router' Vue.config.productionTip = false Vue.use(ElementUI) /* eslint-disable no-new */ new Vue({ el: '#app', router, components:

一、安装 本地环境安装路由插件：npm install vue-router --save-dev 二、配置 在main.js或者src/router文件夹下的index.js中 这里介绍main.js // 入口文件 import Vue from 'vue' // 1.1 导入路由的包 import VueRouter from 'vue-router' // 1.2 安装路由 Vue.use(VueRouter) // 1.3 导入自己的 router.js 路由模块 import router from './router.js' 三、使用 import VueRouter from 'vue-router' // 1. 创建路由对象 var router = new VueRouter({ routes: [ {path:'/',redirect:'/home'}, //配置路由规则 {path:'/home',component:HomeContainer}, {path:'/member',component:MemberContainer}, {path:'/shopcar',component:ShopcarContainer}, {path:'/search',component:SearchContainer}, {path:'/home/newslist'

方式一 通过query 方式传参 这种情况下 query传递的参数会显示在url后面 this.$router.push({ path: '/detail', query: { id: id } }) 对应路由配置： { path: '/detail', name: 'Detail', component: Detail } 子组件获取参数 this.$route.query.id 方式二 通过params方式传参 this.$router.push({ name: 'Detail', params: { id: id } }) 路由配置 { path: '/detail', name: 'Detail', component: Detail } 获取参数 this.$route.params.id 方式三 直接在路由地址后面拼接参数 this.$router.push({ path: `/detail/${id}`, }) 路由配置 { path: '/detail/:id', name: 'Detail', component: Detail } 获取参数 this.$route.params.id 来源： https://www.cnblogs.com/thinkguo/p/11319776.html

最近在用iview做项目，需要实现登录，注册，忘记密码等功能。iview-admin本来就有登录功能，于是想照葫芦画瓢，实现登录界面的注册，忘记密码页面路由跳转。 router.js里路由配置，刚开始的写法是line28和line38，导入组件，其结果是地址栏实现了路由跳转，但是页面却是一片空白。将其改为line29行的导入形式，就可以实现路由切换了。最后发现原来是自己的component后面多了个s 两种方法都可以！！！！！ components:() => import('@/view/login/register.vue') component:register => require(['@/view/login/register.vue'], register) vue-router官方文档 来源： https://www.cnblogs.com/sweetC/p/11934423.html

“vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）” 这段是从网上直接抄的，我们在创建vue项目是有个选项，是否安装vuer-router选择y或者回车，如果不是这么创建的，在命令行安装吧，建议创建时直接安装，省了很多麻烦。 参照网上的栗子没有一个成功的，不知是版本不正确还是什么原因，我的版本是2.9.6，如果你是其他版本，参照我的dome时可能会出错。 先看一下网上的栗子： 这是来自“菜鸟教程”的，一开始我看到后是懵的，js脚本写在那个文件？第一张图的代码写在哪里？后来不甘心，打开xx视频教程，看了一遍又一遍，怎么搞都不对。索性不按照教程的来，自己研究一下吧。 首先假设你已经安装了路由插件。 第一步，在components文件下创建title.vue和title1.vue title.vue内容： <template> <div>如果不是为了衣锦返乡，谁愿意远走他乡。</div> </template> <script> title2.vue内容： <template> <div> <br> 将来的你会感谢现在拼命的你 </div> </template> 第二步，打开src/router/index.js import Router from

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其实区别并不大。都是一种设计思想。主要就是 mvc中 Controller演变成 mvvm中的 viewModel。 mvvm主要解决了 mvc中大量的