vue路由 | 易学教程

vue中路由传值

阅读更多关于 vue中路由传值

官房文档里是这样说明的：通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由可以理解为： this.$router 相当于一个全局的路由器对象，包含了很多属性和对象（比如 history 对象），任何页面都可以调用其 push(), replace(), go() 等方法。 this.$route 表示当前路由对象，每一个路由都会有一个 route 对象，是一个局部的对象，可以获取对应的 name, path, params, query 等属性。 this.$router.push()跳转页面的记录点：　　　　　1.直接写路由地址：eg:this.$router.push('/hello');可以直接跳转到hello页面；　　　　　2.path-query方式传值：eg:this.$router.push({path:'/hello',query:{state:'参数1'，value:'参数2'，……}})，跳转后会把参数跟在地址栏后面，在地址栏上可以查看,类似于get请求，跳转的目标页面可以用this.$route.query.state，this.$route.query.value，……去获取传过来的值；　　　　　3.name-params方式：eg:this.$router.push(

vue 中的router-view

阅读更多关于 vue 中的router-view

之前对router-view的理解一直有疑问，其实router-view会找到对应的路由进行渲染，并不会相互影响从上到下渲染时遇到<router-view/>,则到路由设置中根据路径找到对应的组件进行渲染。 { path:"index", component:()=>import("@/components/common/headDeli/index") }//按需引入来源： https://www.cnblogs.com/lipu12281/p/11911028.html

vue实践推荐

阅读更多关于 vue实践推荐

1.vue (1)组件每个组件单独分成文件，如A.vue文件实现A组件；除index.vue之外文件名推荐大写开头如BaseHeader.vue或横线连接base-header.vue; 基础组件名可以共用相同的前缀，如BaseButton; 组件名应该倾向于完整单词而不是缩写；组件名推荐多个单词，如TodoItem代替Todo;html模板中引用推荐todo-item prop定义尽量详细，如指定其类型，必填与否; props: { 　　status: { 　　　　type: String, 　　　　required: true, 　　　　validator: function (value) { 　　　　// 校验方法　　　　　　return *** 　　　　} 　　} } 编辑器通常按照字母顺序组织文件，可以考虑将具有相关关系的组件的命名相关，如都是搜索相关的组件可带公共前缀Search，具有父子关系的组件，可以考虑将子组件命名带上父组件命名参数SearchSidebar.vue NavigationForSearchS idebar.vue；自闭合组件引用；  <MyComponent />  <my-component></my-component> <!-- 在所有地方

Vue router-link路由不同的写法，不一样的效果

阅读更多关于 Vue router-link路由不同的写法，不一样的效果

我想要的路径： http://localhost:8080/#/main/hato/realtime/eventDetail/238 情况一：未进行路由配置： { path: ' eventDetail ', name: ' eventDetail ', component: () => import('@/views/security/alarm-management/ eventDetail ') } 情况二：已进行路由配置 { path: ' eventDetail /:id', name: ' eventDetail ', component: () => import('@/views/security/alarm-management/ eventDetail ') } 在情况一下：路由用 name和params 路由跳转： http://localhost:8080/#/main/hato/realtime/eventDetail 路由用path和query 路由跳转： http://localhost:8080/#/main/hato/realtime/eventDetail ?id=238 const showButton = { props: ["scope"], render: function(h) { return ( <div> <router

vue router应用及总结

阅读更多关于 vue router应用及总结

编写一个小的demo，对router基础的应用学习和理解。效果图示：说明: 点击About在右边显示相关信息. 说明: 点击Home，在下边显示相关信息，且Home下有两个路由链接，分别对应各自的路由组件. 说明: Message下有三个路由链接，对应的路由组件只有一个，只是根据传入的参数不同显示不同数据。项目目录：代码： 1.index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>my-project</title> <link rel="stylesheet" href="./static/css/bootstrap.css"> <style> .router-link-active { color: red !important; } </style> </head> <body> <div id="app"></div>  </body> </html> 2.index.js(router模块) /** * 路由器对象模块 */ import Vue from

Vue路由嵌套

阅读更多关于 Vue路由嵌套

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>嵌套路由</title> </head> <body> <div id="app"> </div> </body> </html> <script src="js/vue.js"></script> <script src="node_modules/vue-router/dist/vue-router.js"></script> <script> Vue.use(VueRouter); // 声明组件路由 var Son1={ template:` <h1>我是子组件1</h1> ` }; var Son2={ template:` <h1>我是子组件2</h1> ` }; // 创建路由对象 var Home={ template:` <div> 首页内容 <br /> <router-link to='/home/son1'>组件1</router-link> <router

Vue命名路由

阅读更多关于 Vue命名路由

Vue命名路由 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"></div>  <script type="text/javascript" src="./vue.min.js"></script>  <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script> <script type="text/javascript"> // 2.让vue使用该VueRouter创建如果vue是一个局部作用域的对象那么必须Vue.use(VueRouter); // Vue.use(VueRouter); //声明组件 var Login = { template:`<div>我是登录页面</div>` }; var Register = { template:`<div>我是注册页面</div>` }; // 3.创建路由对象 var router = new VueRouter({ // 4

老板让我十分钟上手nx-admin

阅读更多关于老板让我十分钟上手nx-admin

大体流程参考资料: nx-admin项目地址首先这里就不讲解vue和vuex之类的基础东西了有兴趣的可以去官方文档了解。这里根据流程走向大概说说路由配置首先找到路由配置,路由配置放在了 src/router/index.js 路由配置里暴露了两个常量一个是 constantRouterMap 另外一个是 asyncRouterMap 这里先说说 constantRouterMap 。 nx-admin的权限验证大概是 1 默认大家都能访问的页面,不需要权限, 都访问的页面定义为 constantRouterMap 2 需要登录或者需要权限的页面路由定义为 asyncRouterMap 根据后台获取到用户信息role（权限）的不同来动态加载asyncRouterMap中meta.role的权限对应的页面登录成功后做的事情点击登录以后左侧的侧边栏有导航列表。这里提出两个疑问？根据路由配置说的动态加载对应的权限路由那么侧边栏那么多路由肯定不能写死吧？我点击登录后那些登录流程怎么走的？用户权限存在哪里？token在哪里？侧边栏的动态渲染根据问题1来回答首先我们找到layout也就是 src/views/layout/Layout.vue ，因为在路由配置文件我们看见 asyncRouterMap 中好多组件的父组件都是 Layout 在 Layout

Vue.js面试题整理

阅读更多关于 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中大量的 DOM

（十）动态加载菜单

阅读更多关于（十）动态加载菜单

动态加载菜单之前我们的导航树都是写死在页面里的，而实际应用中是需要从后台服务器获取菜单数据之后动态生成的。我们在这里就用上一篇准备好的数据格式Mock出模拟数据，然后动态生成我们的导航菜单。接口模块化我们向来讲究模块化，之前接口都集中在，interface.js，我们现在把它改名为 api.js，并把里边原来登录、用户、菜单的相关接口都转移到我们新建的接口模块文件中。模块化之后的文件结构如下图所示模块化之后，模块接口写在相应的模块接口文件中，如下面是登录模块 login.js import axios from '../axios' /* * 系统登录模块 */ // 登录 export const login = data => { return axios({ url: '/login', method: 'post', data }) } // 登出 export const logout = () => { return axios({ url: '/logout', method: 'get' }) } 模块化之后，父模块可以像这样引入 api.js /* * 接口统一集成模块 */ import * as login from './moudules/login' import * as user from './moudules/user' import

订阅 vue路由