VueRouter -- 匹配优先级 · Vue&&TypeSprict--基础总结

>[success] # VueRouter -- 匹配优先级 ~~~ 1.有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高 2.正常代码逻辑应该是越往下优先级越高，但在router 上正好相反 3.下面案例两个组件都对应有一个地址，但是'sapp' 的组件在路由中最先被注册，因此优先使用 ~~~ >[danger] ##### 案例说明 ![](https://box.kancloud.cn/0b3b6dc35b7a862acc41825f8fa57a40_177x68.png) ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <router-link to="/app">sapp</router-link> <router-view></router-view> </div> <template id="sapp"> <div> sss </div> </template> <template id="ssapp"> <div> ssss </div> </template> <script type="text/javascript"> const sapp = { template:'#sapp', }; const ssapp = { template:'#ssapp', }; const routes=[ {path:"/app", component:sapp}, {path:"/app", component:ssapp}, ]; const router = new VueRouter({ routes // (缩写) 相当于 routes: routes }); var vm = new Vue({ el: "#app", router, }) </script> </body> </html> ~~~