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> ~~~