原文：https://www.cnblogs.com/goloving/p/9211358.html
vue-router是vue單頁面開發的路由，就是決定頁面跳轉的！
<router-link> 組件支持用戶在具體有路由功能的應用中（點擊）導航，通過to屬性指定目標地址，
Props 屬性
1、to
表示目標路由的鏈接，當被點擊后，內部會立刻把to的值傳到router-push()，
<router-link :to="‘home‘">Home</router-link>
<router-link :to="{ path: ‘home‘ }">Home</router-link>
//命名路由
<router-link :to="{ name: ‘user‘, params: {userId: 123} }">Home</router-link>
//帶查詢引數，下面的結果為/register?plan=private-->
<router-link :to="{ path: ‘register‘, query: {plan: ‘private‘}}">Register</router-link>
2、replace
設定replace屬性的話，當點擊時，會呼叫roter.replace()而不是router.push()，所以導航后不會留下history記錄，也就是不能回退到上一個頁面
<router-link :to="{path: ‘/abc‘}" replace>ABC</router-link>
3、append
設定append屬性后，則在當前路徑前添加基路徑，例如，我們從/a導航到一個相對路徑b，如果沒有配置append，則路徑為/b，如果配了，則為/a/b
<router-link to="b" append>Home</router-link>
4、tag
有時候想要<router-link>渲染成某種標簽，例如<li>，于是我們使用tag prop 類指定何種標簽，同樣它還是會監聽點擊，觸發導航，
<router-link to="/foo" tag="li">FOO</router-link> // 渲染結果 <li>FOO</li>
5、active-class
設定鏈接激活時使用的css類名，默認值可以通過路由的構造選項linkActiveClass來全域配置, 默認值為 ‘router-link-active‘
export default New Router({
linkActiveClass: ‘active‘
})
6、exact
"是否激活"，默認是false ，舉個粟子，如果當前的路徑是/a 開頭的，那么<router-link to="/a"> 也會被設定css類名
按照這個規則，<router-link to="/"> 將會點亮各個路由！想要鏈接使用"exact匹配模式"，則使用exact屬性：
// 這個鏈接只會在地址為 / 的時候被激活 <router-link to="/" exact>Home</router-link> <router-link to="/user">USER</router-link> <router-link to="/user/userinfo">USER-info</router-link> // 如果不設定exact，則當路由到了/user/userinfo 頁面時，USER也是被設定了router-link-active樣式的！
7、events
宣告可以用來觸發導航的事件（默認是‘click‘），可以是一個字串或者是一個包含字串的陣列
8、將"激活時的css類名"應用在外層元素
有時候我們要讓"激活的css類名"應用在外層元素，而不是<a>標簽本身，那么可以用<router-link>渲染外層元素，包裹著內層的原生<a>標簽
<router-link tag="li" to="/foo">
<a>/foo</a>
</router-link>
//在這種情況下，<a>將作為真實的鏈接（能獲取到正確的href的），而"激活時的css類名"則設定到外層的<li>
9、方法
router-link默認是觸發router.push(location)，如果設定的replace 則觸發router.replace(location)，這有啥區別呢？
router.push() ：導航跑到不同的URL,這個方法會向history堆疊添加一個新的記錄，所以，當用戶點擊瀏覽器后退按鈕時，則回到之前的url.
router.replace(): 跟router.push作用是一樣的，但是，它不會向history添加新記錄，而是跟它的方法名一樣替換掉當前的history記錄.
router.go(n): 這個方法的引數是一個整數，意思是在history記錄中向前或者后退多少步，類似window.history.Go(n)
作者：crazyLL 說明：https://www.cnblogs.com/crazy-lc/ 純粹自己記錄著玩的，來源于自己的想法或者互聯網文章，侵刪
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/296374.html
標籤：其他
上一篇：列印CSDN博客內容格式腳本
下一篇：HTML5 新增內容和 API