官網文檔地址：https://router.vuejs.org/zh/api/#to
今天項目突然有需求，讓vue中的一個頁面跳轉到另一個頁面
// 字符串 <router-link to="apple"> to apple</router-link> // 對象 <router-link :to="{path:'apple'}"> to apple</router-link> // 命名路由 <router-link :to="{name: 'applename'}"> to apple</router-link> //直接路由帶查詢參數query，地址欄變成 /apple?color=red <router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link> // 命名路由帶查詢參數query，地址欄變成/apple?color=red <router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link> //直接路由帶路由參數params，params 不生效，如果提供了 path，params 會被忽略 <router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link> // 命名路由帶路由參數params，地址欄是/apple/red <router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>
router-link標簽會自動渲染成a標簽，
<router-link>組件的屬性有：
to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class
1、to（必選參數）：類型string/location
2、tag：類型: string 默認值: "a"
如果想要 <router-link> 渲染成某種標簽，例如 <li>。 於是我們使用 tag prop 類指定何種標簽，同樣它還是會監聽點擊，觸發導航。
<router-link :to="{name:'schedule',query:{aa:'dsd'}}" tag="li" >跳轉</router-link>
如果此時我們想要在這個li標簽中添加a標簽,如下所示，可以不為a標簽添加href屬性即可哦
<router-link :to="{name:'schedule',query:{aa:'dsd'}}" tag="li" > <a>跳轉</a> </router-link>
在這種情況下，<a> 將作為真實的鏈接 (它會獲得正確的 href 的)，而 "激活時的CSS類名" 則設置到外層的 <li>。
3、active-class 類型: string 默認值: "router-link-active"
設置 鏈接激活時使用的 CSS 類名。默認值可以通過路由的構造選項 linkActiveClass 來全局配置。
<router-link :to="{name:'schedule',query:{aa:'dsd'}}" tag="a" active-class="red" > 跳轉 </router-link>
默認值通過路由的構造選項 linkActiveClass 來全局配置,如下示例：
export default new Router({ mode:'history', linkActiveClass:'is-active', routes: [ { path:'/about', component:about } ] })
4、exact-active-class 類型: string 默認值: "router-link-exact-active"
配置當鏈接被精確匹配的時候應該激活的 class。注意默認值也是可以通過路由構造函數選項 linkExactActiveClass 進行全局配置的。
5、exact 類型: boolean 默認值: false
按照這個規則，每個路由都會激活<router-link to="/">！想要鏈接使用 "exact 匹配模式"，則使用 exact 屬性：
<li><router-link to="/">全局匹配</router-link></li> <li><router-link to="/" exact>嚴格匹配</router-link></li>
簡單點說，第一個的話，如果地址是/aa,或/aa/bb，……都會匹配成功，
但加上exact，只有當地址是/時被匹配，其他都不會匹配成功
6、event 類型: string | Array<string> 默認值: 'click' 聲明可以用來觸發導航的事件。可以是一個字符串。
<router-link to="/document" event="mouseover">document</router-link>
如果我們不加event，那么默認情況下是當我們點擊document的時候，跳轉到相應的頁面，但當我們加上event的時候，就可以改變觸發導航的事件，比如鼠標移入事件
7、replace 類型: boolean 默認值: false
設置 replace 屬性的話，當點擊時，會調用 router.replace() 而不是 router.push()，於是導航后不會留下 history 記錄。
8、append 類型: boolean 默認值: false 設置 append 屬性后，則在當前 (相對) 路徑前添加基路徑
9、另外，加上target屬性為"_blank",依然可以打開一個新的頁面
<router-link :to="{name:'schedule',query:{aa:'dsd'}}" tag="a" append target="_blank" > 跳轉 </router-link>