1概述
vue-router是vue的一个库，可以快速的开发一个单页应用；
在导航切换时，页面根本就不刷新，没有整页刷新的概念，所以用户的输入可以被保留下来，不丢失状态，不丢失数据；
不用每切换一次导航就重新拉取一遍数据，只需要取一次数据，就可以一直用；
在网页上最频烦的操作就是点点点，这样页面不刷新，就可以极大的节省前端和后端的资源。
2安装和基本配置
引用vue文件和vue-router的库文件，https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js
例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>路由</title> </head> <body> <div id="app"> <div> <router-link to="/">首页</router-link> <router-link to="/about">关于</router-link> </div> <div> <router-view></router-view> </div> </div> </body> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> <script> var rounts=[ { path:'/', component:{ template:` <div><h1>首页</h1></div> ` } }, { path:'/about', component:{ template:` <div><h1>关于</h1></div> ` } } ]; var router=new VueRouter({ routes:rounts }); var app=new Vue({ el:'#app', router:router }) </script> </html>
配置说明：
定义一个数组rounts，数组中的每一项都是一个配置，path代表路由的地址，/就表示首页（默认页）；可以直接传进一个component，这个component和普通的component一样，该有的功能都可以用；
然后把定义的规则传给构造的路由，var router=new VueRouter();定义一个routes，把数组传给它就可以了；
在new Vue中加一个router属性，把定义的构造器router传进去；
html中，要加一个标签router-link，用to指定地址，再用router-view表示显示的视图，它显示的就是template中定义的内容
3传参及获取传参
vue-router中传参有两种方式，
第一种，User后面加个冒号：/user/:name，在template中通过{{$route.params.name}}来获取。
例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>路由-传参</title> </head> <body> <div id="app"> <div> <router-link to="/">首页</router-link> <router-link to="/about">关于</router-link> <router-link to="/user/大美女">大美女</router-link> <router-link to="/user/小东西">小东西</router-link> </div> <div> <router-view></router-view> </div> </div> </body> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> <script> var rounts=[ { path:'/', component:{ template:` <div><h1>首页</h1></div> ` } }, { path:'/about', component:{ template:` <div><h1>关于</h1></div> ` } }, { path:'/user/:name', component:{ template:` <div> <p>我叫{{$route.params.name}}</p> <!-- <p>我今年{{$route.query.age}}岁</p> --> </div> ` } } ]; var router=new VueRouter({ routes:rounts }); var app=new Vue({ el:'#app', router:router }) </script> </html>
第二种，通过query，就是地址后面跟着?这样，例如：
http://127.0.0.1:8848/vuetest.html?age=20#/，在template中把params换成query就可以了，{{$route.query.age}}
例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>路由-传参</title> </head> <body> <div id="app"> <div> <router-link to="/">首页</router-link> <router-link to="/about">关于</router-link> <router-link to="/user/大美女">大美女</router-link> <router-link to="/user/小东西">小东西</router-link> </div> <div> <router-view></router-view> </div> </div> </body> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> <script> var rounts=[ { path:'/', component:{ template:` <div><h1>首页</h1></div> ` } }, { path:'/about', component:{ template:` <div><h1>关于</h1></div> ` } }, { path:'/user/:name', component:{ template:` <div> <p>我叫{{$route.params.name}}</p> <p>我今年{{$route.query.age}}岁</p> </div> ` } } ]; var router=new VueRouter({ routes:rounts }); var app=new Vue({ el:'#app', router:router }) </script> </html>
4子路由
在上面例子的基础上，想实现“大美女”后面加个/more
再加一个children的配置项，代表子路由，也是一个数组，写法和父级的rounts一样，path可以写成more，传参写法也一样，
（未完待续...）