vue-router | 易学教程

Vue-router(一) HelloWorld

阅读更多关于 Vue-router(一) HelloWorld

由于Vue在开发时对路由支持的不足，后来官方补充了vue-router插件，它在Vue的生态环境中非常重要，在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是什么？这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。有的小伙伴会有疑虑，为什么我们不能像原来一样直接用<a></a>标签编写链接哪？因为我们用Vue作的都是单页应用，就相当于只有一个主的index.html页面，所以你写的<a></a>标签是不起作用的，你必须使用vue-router来进行管理。本文档主要是一个Vue-router入门文档，需要先查看“ Vue-cli搭建项目 ”文档，创建项目基础上实现以下功能。安装vue-router vue-router是一个插件包，所以我们还是需要用npm来进行安装的。在使用Vue-cli搭建项目时，有一个选项是选择是否安装vue-router的，如果已经安装就不需要安装了，如果未安装需要在项目根目录下通过执行以下命令进行安装： npm install vue-router --save-dev 如果你安装很慢，也可以用cnpm进行安装。解读router/index.js文件我们用vue

Vue element表格分页数据加载示例

阅读更多关于 Vue element表格分页数据加载示例

一、element ui表格分页数据加载示例 1.视图  <el-table v-loading="loading" :data="tableData" border stripe style="width:100%;"> <el-table-column prop="Title" label="标题"> </el-table-column> <el-table-column label="是否删除"> <template slot-scope="scope"> <el-tag v-if="scope.row.IsDelete" type="success">是</el-tag> <el-tag v-else type="warn">否</el-tag> </template> </el-table-column> <el-table-column prop="CreateTime" label="日期" > </el-table-column> </el-table>  <div class="block" style="margin-top:20px;"> <el-pagination background @size-change="handleSizeChange" @current-change=

How to use vue-resource ($http) and vue-router ($route) in a vuex store?

阅读更多关于 How to use vue-resource ($http) and vue-router ($route) in a vuex store?

Before I was getting movie detail from the component's script. The function first check whether the movie ID of the store is same as of the route's param movie ID. If its same then don't get the movie from the server API, or else get the movie from the server API. It was working fine. But now I am trying to get the movie details from the store's mutation. However I am getting error Uncaught TypeError: Cannot read property '$route' of undefined How to use vue-router ($route) to access the params and vue-resource ($http) to get from the server API in vuex store? store.js: export default new Vuex

Vue js rerender the same component when changing route

阅读更多关于 Vue js rerender the same component when changing route

I have one auth component that I am using both in the login and the signup route. const routes = [{ path : '/', name: 'home', component: Home }, { path : '/signin', name: 'signin', component: Auth }, { path : '/signup', name: 'signup', component: Auth }]; If for example, I'm on the login page The problem is if I type something in the text inputs and go to the signup the text is still there, how I force the component to reinitialize? The better way to do this is actually to bind the routes path to the router-view's key, i.e. <router-view :key="$route.path"></router-view> Doing so will force Vue

vue续集2

阅读更多关于 vue续集2

1.前端路由 1.1为什么做单页面应用（1）传统的开发方式 url改变后，立马发送请求，响应整个页面，有可能资源过多，传统开发会让前端的页面出现 “白屏” 用户体验不好（2）SPA 单页面应用：锚点值的改变后，不会立刻发送请求，而是在某个合适的时机，发送ajax请求，局部改变页面中的数据,页面不立刻跳转用户体验好 1.2前端路由的原理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body>  <a href="#/login">登录页面</a> <a href="#/register">注册页面</a> <div id="app"> </div> <script type="text/javascript"> // onhashchange 事件 url上的锚点数据（#/xxx改变） var oDiv = document.getElementById('app'); window.onhashchange =

单页面应用的History路由模式express后端中间件配合

阅读更多关于单页面应用的History路由模式express后端中间件配合

这篇文章主要分享一下通过 HTML5 的 history API 的时候，使用 NodeJS 后端应该如何配置，来避免产生404的问题，这里是使用的express的框架，主要是通过 connect-history-api-fallback 这个中间件来实现的。前言这里使用vue-router来实现的单页应用为例，访问 http://cnode.lsqy.tech ，进入首页，点击下面的tab栏，一切都是很正常的，但当这时候你 ctrl+command+R 或点击浏览器的刷新按钮或在地址栏上再敲一下回车，总之就是刷新，发现就会出现404了，比如这样的错误 Cannot GET /message/ ,因为默认浏览器会认为你是在请求服务端的路由，服务端那边没有对应的处理，所以自然就会出错了，下面来引入 connect-history-api-fallback 这个中间件，来无痛使用优雅的History路由模式。引入connect-history-api-fallback 首先看它的介绍 Middleware to proxy requests through a specified index page, useful for **Single Page Applications** that utilise the HTML5 History API.

Add event listener to <router-link> component using “v-on:” directive - VueJS

阅读更多关于 Add event listener to component using “v-on:” directive - VueJS

I'm attempting to add a custom handler InlineButtonClickHandler to a <router-link> component's click event, so that I can emit a custom appSidebarInlineButtonClick event. But, my code isn't working. What am I doing wrong? <template> <router-link :to="to" @click="InlineButtonClickHandler"> {{ name }} </router-link> </template> <script type="text/babel"> export default { props: { to: { type: Object, required: true }, name: { type: String, required: true } }, methods: { InlineButtonClickHandler(event) { this.$emit('appSidebarInlineButtonClick'); } } } </script> thanksd You need to add the .native

Vue路由总结

阅读更多关于 Vue路由总结

详见我的个人博客：一、路由的基本使用 1、安装 vue-router 路由模块 //引入vue-router路由模块 < script src = " ./lib/vue-router-3.0.1.js " > </ script > 2、创建一个路由对象 var routerObj=new VueRouter({ //route这个配置对象中的route表示【路由匹配规则】的意思 routes:[ // 路由匹配规则 // 每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性： // 属性1 是 path，表示监听哪个路由链接地址； // 属性2 是 component，表示，如果路由是前面匹配到的 path ，则展示 component 属性对应的那个组件 // 注意： component 的属性值，必须是一个组件的模板对象，不能是组件的引用名称； { path: '/login', component: login }, { path: '/register', component: register } ] }) 3、在定义路由之前先定义路由中的组件模板对象 var login = { template: ' < h1 > 登录组件 </ h1 > ' } var register = { template: ' < h1 > 注册组件 </

vue-router-官网

阅读更多关于 vue-router-官网

vue router功能：嵌套的路由/视图表模块化的/基于组件的路由配置路由参数/查询/通配符基于vue.js过渡系统的视图过渡效果细粒度的导航控制带有自动激活的css class的链接 h5历史模式或hash模式，在IE9中自动降级自定义的滚动条行为 <router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view> 以/开头的嵌套路径会被当作根路径，则使用嵌套路径无须设置嵌套的路径。 router传参方式：路由匹配参数；query方式传参；params方式传参； (1)动态路由匹配,路由匹配参数： // 动态路径参数以冒号开头 { path: '/user/:id', component: User } // 获取参数 let name = this.$route.params.id; // 链接里的id被封装进了 this.$route.params (2) query this.$router.push('/login/' + this.id); this.$route.query.id this.$router.push({ path: '/payment/recharge', query: { amount: that.amount } }); this.$route

Can vue-router open a link in a new tab?

阅读更多关于 Can vue-router open a link in a new tab?

问题 I have a summary page and a detail subpage. All of the routes are implemented with vue-router (v 0.7.x) using programmatic navigation like this: this.$router.go({ path: "/link/to/page" }) However, when I route from the summary page to the subpage, I need to open the subpage in a new tab just as one would by adding _target="blank" to an <a> tag. Is there a way to do this? 回答1: I think that you can do something like this: let routeData = this.$router.resolve({name: 'routeName', query: {data:

订阅 vue-router