vue-router

vue-router学习 转自：https://my.oschina.net/u/1416844/blog/849971 1. vue-router介绍 vue-router把react-router和ui-router中所有的优点都超了过来 官方文档： https://router.vuejs.org/ 2. 路由的快速开始 定义各页面容器组件 定义路由配置文件 在入口文件添加路由配置信息 修改跟组件页面信息 接下来可以启动项目查看路由跳转 3. 路由基础知识介绍 3.1. 动态路由 你可以通过：给一个路由添加参数 之后在组件中通过this.$route.params.参数名获取 this.$route的api文档 https://router.vuejs.org/zh-cn/api/route-object.html 当路由参数发生变化的时候，组件不会被卸载而是复用，这也意味着组件的生命周期钩子不会再被调用，那么你只能监听$routes实例属性知道路由发生了变化 3.2. 嵌套路由 如果有嵌套路由，要用children属性去配置，路由路径会自动拼接 可以给一个页面初始化一个组件用空路由实现 3.3. 用代码进行路由跳转 在组件中你可以通过this.$router获取路由对象 3.4. 命名路由 有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由

vue 路由嵌套 vue-router --》children 在项目的很多子页面中，我们往往需要在同一个页面做一个组件的切换，同时保存这个页面的部分数据（比如树形菜单），进而显示不同的数据，之前我都是通过v-show/v-if来实现，但当切换的组件太多时，上述方法显然不太合理，而在实际开发中，当你切换的组件太多时，后端往往会将你切换组件的路由给你，所以在这说一下关于vue-router中children，来解决此问题。 　　例如：在routerChildren.vue中有两个按钮，点击按钮1跳转的one页面 ，点击按钮2跳转的two页面 ，但是需要保存这两个按钮（如果直接通过this.$router.push(),按钮将会消失，会完全跳转） 　　1.首先我们需要配置一下路由 ，在router.js中　　　　 import RouterChildren from "./views/routerChildren.vue" import RouterChildrenOne from "./views/children/one.vue" import RouterChildrenTwo from "./views/children/two.vue" { path: "/routerChildren", name: "routerChildren", component:

在样式里面，，视口 是什么意思 看到19了 https://router.vuejs.org/ vue路由配置： 1.安装 npm install vue-router --save / cnpm install vue-router --save 2、引入并 Vue.use(VueRouter) (main.js) import VueRouter from 'vue-router' Vue.use(VueRouter) 3、配置路由 1、创建组件 引入组件 2、定义路由 （建议复制s） const routes = [ { path: '/foo:aid', component: Foo }, --> 动态路由 { path: '/bar', component: Bar }, { path: '*', redirect: '/home' } /*默认跳转路由*/ ] 3、实例化VueRouter const router = new VueRouter({ routes // （缩写）相当于 routes: routes }) 4、挂载 new Vue({ el: '#app', router， render: h => h(App) }) 5 、根组件的模板里面放上这句话 <router-view></router-view> 这句话 会把 子页面的内容加载进来 6

路由分为前端路由和后端路由，后端主要是通过识别请求路径，分发对应的资源， 而前端路由主要是针对SPA单页面应用的局部刷新。识别触发的事件，分发对应的渲染内容。 vue-router中的router-link就会默认被渲染为a标签，在其path中的路径上加上#采用hash链接的方式进行导航，从而渲染对应的组件。 下面是使用vue-router的基本步骤： 1.引入库文件 2.添加路由链接 3.添加路由占位 4.定义路由组件 5.创建路由实例对象并配置规则 6.将路由挂载到vue根实例中 关于动态路由匹配： （1）使用$route.params.参数，不够灵活 （2）使用Prop传参，boolean类型这一种最简单常用 (3)使用prop传递静态参数 (5)动静参数结合 命名路由的导航 编程式导航 this.$router.push('') this.$router.go(-1) 来源： CSDN 作者： MambaCoding 链接： https://blog.csdn.net/Clearlove_8/article/details/104145048

上接 https://blog.csdn.net/milijiangjun/article/details/104114213 0007windows搭建vue 上接 https://blog.csdn.net/milijiangjun/article/details/104017289 0001-框架的搭建 现在我们要接着开始配置我们想要的vue 环境 输入现有的命令 npm install vue -g npm 安装 模块 vue 安装到全局 出现提示安装地址目录 vue@2.6.11 F:\AddRuanJoms\NodeJs\node_global\node_modules\vue dist 是distribution 的缩写是最终发布产品，也是我们需要的核心东西 然后我们安装vue-route （此次可以不安装此程序） 输入 npm install vue-router -g 出现提示 vue-router@3.1.5 F:\AddRuanJoms\NodeJs\node_global\node_modules\vue-router 安装vue 脚手架 输入 npm install vue-cli -g 出现提示 Microsoft Windows [版本 10.0.18362.30] (c) 2019 Microsoft Corporation。保留所有权利。 C:

hash模式 ：location.hash: 获取url的hash值； window.onhashchange监听hash的改变 history模式 ：location.pathname:获取路径； window.onpopstate监听history变化 vue.use的用法 ： 把你给它的东西调用一遍；如果你给它的是一个方法，那么它会直接执行这个方法，如果你给它的东西里有一个install属性，它会执行这个install function a () { console.log('This is function a') } a.install = function (vue) { console.log('add "install" property to function a') // 全局混入vue实例，添加在mixin中的的变量，方法在所有子组件中都可以被获取到 vue.mixin({ data () { return { c: 'this is in mixin' } }, methods: { testMethod () { } }, // 生命周期注入 created () { console.log('I\'m in global created method') } }) } Vue.use(a) // add "install" property to

1.MVVM的理解 MVVM：Model-View-ViewModel，模型-视图-视图模型。Model指后端传递的数据，View指所看到的页面，ViewModel是连接view和model的桥梁。ViewModel功能： 1.将模型转换为视图，即将后端传递的数据转化为所看到的页面。实现的方式是数据绑定。 2.将视图转换为模型，实现的方式是dom事件监听。 两个方向都实现我们称之为数据的双向绑定。 在MVVM的框架下视图和模型不直接通信，通过ViewModel来通信。ViewModel通常实现一个observer观察者，当数据变化后，其能监听到数据的变化并且通知对应的视图进行自动更新，而当用户操作视图时，ViewModel也能监听到这种变化并且通知数据做改动。 前端并没有传统意义上的MVC模式，过去为了解决浏览器兼容问题出现的类库如jQuery并没有实现对业务逻辑的分层，所以维护性和扩张性较差，而以前的文件缺乏正规的组织形式，因此出现MVVM。在vue中model指的是js数据，view指的是页面视图，viewmodel指vue实例化对象。 2.vue优点 轻量级框架，国人开发简单易学，双向数据绑定，组件化，虚拟dom操作 3.父子组件传参 父向子props，子向父$emit，vuex，ref 4.v-show和v-if 都控制元素的显示和隐藏 v