vue-router(常用用法) - iT 邦幫忙 | vue push query
好咧~昨天介紹了vue-cli在專案初始時對vue-router的配置。接下來要介紹更深入的用法。路由切換上一章有介紹配置路由的部分,如果有多個路由如下面程式碼,該如何在路由間切換呢?!routes:[{path:/helloworld,name:HelloWorld,component:HelloWorld},{path:/helloandy,name:HelloAndy,component:HelloAndy}]首先我們先來看一下App.vue的這段程式碼:
好咧~昨天介紹了 vue-cli 在專案初始時對 vue-router 的配置。
接下來要介紹更深入的用法。
路由切換上一章有介紹配置路由的部分,如果有多個路由如下面程式碼,該如何在路由間切換呢?!
routes: [ { path: /helloworld, name: HelloWorld, component: HelloWorld }, { path: /helloandy, name: HelloAndy, component: HelloAndy } ]首先我們先來看一下 App.vue 的這段程式碼:
<div id="app"> <img src="./assets/logo.png"> <router-view/> </div>有一個 tag 是 <router-view />,這個就是會渲染當前路徑指定的 component,所以在路由切換的時候會在這顯示不同的內容。
路由切換接下來要怎麼觸發路由的切換呢?!有 2 個方式:
<router-link>router-link 就字面上的意思也還蠻好理解的就是路徑的連結。
router-link 預設會解析成 HTML 的 <a></a>
使用方式如下:
<router-link to="/helloWorld">World</router-link> <router-link to="/helloAndy">World</router-link><router-link> tag 內能夠帶幾個屬性
tag上面有提到 router-link 預設會解析成 HTML 的 <a></a>,但是很多時候我們會想要使用...