VueRouter(自定义VueRourter、使用方法、router-view\link、传递参数、路由嵌套、重定向、路由拦截（全局和局部守卫）、命名路由、路由模式（原理）、路由懒加载）

定义需要切换的组件对象，例如one={template:'<div>one</div>'}，two={template:'<div>two</div>'}。
通过一个包含多个对象的数组来定义路由规则，每个对象就是一个规则，例如const v=[{path:'/one',component:one},{path:'/two',component:two}]。这里的one、two为component对象，不能传component的名称，path:'/'相当于当前路径。
创建VueRouter对象，const vr=new VueRouter({routes:v})。
将创建好的路由对象绑定在Vue实例上new Vue（{el:'#app',data:{},router:vr})。
通过直接设置location.href='#/one'或this.$router.push('/one')或this.$router.replace('/one')（注意和this.$route区分，route为当前匹配的路由对象信息，router为全部的路由信息）跳转或a标签改变当前网页链接，例如<a href='#/one'>，点击便会改变当前url地址为....html#/one，此时router-view标签便会根据路由规则查找path='/one'的组件显示，此例会显示one的组件。注意push相当于是压入栈顶，可以通过this.$router.back()方法或浏览器后退键回到上一次的路由，而replace相当于把栈顶的给替换了，是无法回到上一次的路由。

router-view标签

根据不同的路由规则和当前的url对应显示不同的组件。

name属性（命名视图）

当有name属性后为命名视图，作用：在相同的url情况下想通过router-vie标签展示不同的组件。例如给router-view标签添加属性name='rv1'，还需改变路由规则const v=[{path:'/one',components:{rv1:one,rv2:two}},{path:'/two',component:two}]，这时url地址为....html#/one时，router-view标签显示组件one，想要显示组件two，把name改为'rv2'即可（改url也行）。

router-link标签

搭配router-view标签，用于切换组件。上面有to属性表示当前url后拼接的地址即使以https://开头依然会拼接在其后，注意不需要像a标签一样添加#了（直接to='/one'即可），tag属性表示当前标签的显示形式（以HTML中的什么标签替换该标签，默认为a标签），显示点击后的标签的class会自动添加值'router-link-exact-active router-link-active'，在原router-link中设置属性active-class='str'，则router-link-active会变成str。

传递参数形式

方法一：通过URL参数在之后添加？key1=value1&key2=value2的形式，在组件对象的生命周期方法（例如one={template:'<div>one</div>'，created(){}}）中通过this.$route.query拿到数据对象，对象的属性和值与其对应。

方法二：在指定路由规则时通过占位符传递数据属性名，通过URL传递数据属性值。例如const v=[{path:'/one/:name/:age',component:one,props:true