vue-router是Vue.js官方的路由插件，用于构建单页面应用。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。
下面是vue-router的登录注册例子
<!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>router举例</title> <style> .active{ color:red; } </style> </head> <body> <div id="app"> <!-- 定义路径如何跳转 to属性定义路径 --> <!-- router-link标签默认被解析成a链接 --> <!-- tag属性可以定义具体是哪个标签 --> <router-link to="/login" tag="span">登录</router-link> <router-link to="/resign">注册</router-link> <router-view></router-view> <!-- router-view定义组件显示的容器 --> </div> <script src="lib/vue.js"></script> <script src="vue-router-3.0.1.js"></script> <!-- 引入router文件 --> <script> var tem1 = { template: "<h1>登陆组件</h1>" } var tem2 = { template: "<h1>注册组件</h1>" } // 实例化vuerouter,var routerObj = new VueRouter({}) // 参数routes，是一个数组，定义路由匹配规则（在什么路径下显示什么组件） // routes有两个参数 path和component // path：监听的路由的地址 // component：表示在这个地址下显示哪个组件 // redirect：代表路由的重定向 在这个路径下，把地址重新定义 var routerObj = new VueRouter({ routes: [ { path: "/", redirect: "/login" }, { path: "/login", component: tem1 }, { path: "/resign", component: tem2 }, ], //linkActiveClass定义router-link被激活时的类名 linkActiveClass:"active" }) //把定义的路由规则放在new vue中 var vm = new Vue({ el: "#app", router: routerObj //把定义的路由规则放在new vue中 }) </script> </body> </html>
如果要定义子路由用children表示,它的属性也有path、component
v-router传参：
Ⅰ、query传参
<!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>query传参</title> </head> <body> <div id="app"> <router-link to="/args?year=90&age=20" >query传参</router-link> <router-view></router-view> </div> <script src="lib/vue.js"></script> <script src="lib/vue-router-3.0.1.js"></script> <script> var tem = { template: "<h1>传参year为{{$route.query.year}}传参age为{{$route.query.age}}</h1>", data(){ return { year:this.$route.query.year, age:this.$route.query.age } }, } var routerObj = new VueRouter({ routes: [ { path: "/", redirect: "/args" }, { path: "/args", component: tem }, ], }) var vm = new Vue({ el: "#app", router: routerObj }) </script> </body> </html>
Ⅱ、params传参
<!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>params传参</title> </head> <body> <div id="app"> <router-link to="/args/90/20" >params传参</router-link> <router-view></router-view> </div> <script src="lib/vue.js"></script> <script src="lib/vue-router-3.0.1.js"></script> <script> var tem = { template: "<h1>传参year为{{$route.params.year}}传参age为{{$route.params.age}}</h1>", data(){ return { year:this.$route.params.year, age:this.$route.params.age } }, } var routerObj = new VueRouter({ routes: [ { path: "/", redirect: "/args" }, { path: "/args/:year/:age", component: tem }, ], }) var vm = new Vue({ el: "#app", router: routerObj }) </script> </body> </html>