VueRouter -- 命名路由 · Vue&&TypeSprict--基礎總結

>[success] # 命名路由 ~~~ 1.上面的案例都是通過'router-link' 中的'to'屬性和制定的連接進行搭配跳轉，命名路由則是，路由中定義的名字進行跳轉 2.思考為什么要這么做，首先在路由的時候，我們定義了一個組件和一個對應的跳轉鏈接，鏈接我們已經在路由階段定義好了，那么是否還需要在 'router-link' 在定義一次呢？其實這個就是利用了命名路由，我們在配置路由的時候加一個name，讓name和'router-link' 進行匹配 3. 書寫時候注意，'router-link'的'to' 要用'v-bind' 去綁定，注意'name' 對著的value 是變量是字符串。 ~~~ >[danger] ##### 案例 ~~~ <!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 v-bind:to="{name:'app'}">sapp</router-link> <router-view></router-view> </div> <template id="sapp"> <div> sss </div> </template> <script type="text/javascript"> const sapp = { template:'#sapp', }; const routes=[ {path:"/app", component:sapp,name:'app'}, ]; const router = new VueRouter({ routes // (縮寫) 相當于 routes: routes }); var vm = new Vue({ el: "#app", router, }) </script> </body> </html> ~~~