[TOC] ### 1. 使用標簽跳轉頁面 ~~~ <!-- 使用標簽跳轉頁面相當于a標簽 --> <!-- “/”表示根目錄 將要 --> <router-link to="/about">about</router-link> ~~~ ### 2. 使用事件跳轉頁面 ~~~ <!-- 事件跳轉頁面 --> <button @click="handleClick">detail</button> export default { name: "home", methods: { handleClick() { // 事件頁面跳轉 （/about為要跳轉的頁面的導出name） this.$router.push("/about"); } }, }; //about頁面 export default{ name:"about", methods:{ } } ~~~ ### 3.router-link詳解 ~~~ <router-link>組件支持用戶在具有路由功能中的點擊導航。通過to屬性指向目標地址，默認渲染成正確的a標簽 1.to屬性 字符串或是對象類型 點擊會立刻把內部to值傳送到router.push() 例：<router-link to="/Home">Home</router-link> 　　<router-link :to="{name:'Home'}">Home</router-link> 　　渲染結果：<a href="Home">Home</a> 2.replace屬性 布爾類型值 設置replace話，點擊調用router.replace();導航就不會留下history記錄 例：<router-link :to="{name:'Home'}" replace>Home</router-link> 3.append屬性 布爾類型值 設置該屬性后，則在當前的相對路徑前加上基路徑 例如，我們從 /a 導航到一個相對路徑 b，如果沒有配置 append，則路徑為 /b，如果配了，則為 /a/b 4.tag屬性字符串類型 如果想把<router-link>渲染成自定義標簽， <router-link :to="{name:'Home'}" tag="li">Home</router-link> 渲染結果：<li>Home</li> 5.active-class屬性字符串類型（默認router-link-active） 設置鏈接激活時使用CSS類名，默認通過linkActiveClass來全局配置 6.exact屬性布爾類型值（默認false） 是否激活默認類名的依據是 inclusive match （全包含匹配） <!-- 這個鏈接只有在地址為/的時候被激活 --> <router-link to=”/” exact></router-link> 7.event屬性字符串類型值或者是數組字符串 聲明可以用來觸發導航事件， 8.exact-active-class屬性字符串類型值（默認router-link-exact-active） 配置當鏈接被精準匹配時候激活class，可通過linkExactActiveClass進行全局配置 ~~~