通俗易懂地講解 Vue router

2021-08-19 13:57:33 字數 2650 閱讀 9012

charset="utf-8">

vuejs 教程title>

name="viewport"

content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

content="yes">

content="black">

.router-link-active

style>

src="vue.js">

script>

src="bower_components/vue-router/dist/vue-router.min.js">

script>

head>

id="box">

to="/home">主頁router-link>

to="/user">使用者router-link>

div>

router-view>

div>

div>

id="home">

我是使用者資訊h3>

to="/user/strive/age/10">striverouter-link>

li>

to="/user/blue/age/80">bluerouter-link>

li>

to="/user/eric/age/70">ericrouter-link>

li>

ul>

router-view>

div>

div>

template>

//元件

var home=;

var user=;

var userdetail=}

' };

//配置路由

const routes=[,]

},//404

];//生成路由例項

const router=new vuerouter();

//最後掛到vue上

new vue().$mount('#box');

script>

body>

router說明:

router簡單說明

#使用程式跳轉(類似angularjs的$state.go)

this.$router.push(location, oncomplete?, onabort?);

#返回歷史頁面 類似 history.go(-1)

this.$router.go(-1)

#頁面link使用

:to="ch.url">

}router-link>

//或者 li>a 就這樣

tag="li"

to="/home"

active-class="active"

:key="index">

homea>

router-link>

watch: 

}

router.beforeeach((, from, next) =>  = meta      // meta代表的是to中的meta物件,path代表的是to中的path物件

var islogin = boolean(store.state.user.id) //

true使用者已登入, false使用者未登入 

if (auth && !islogin && path !== '/login') ) // 跳轉到login頁面

}  next() // 進行下乙個鉤子函式

})它的三個引數:

to: (route路由物件) 即將要進入的目標 路由物件 to物件下面的屬性: path

params

query

hash

fullpath

matched

name

meta(在matched下,但是本例可以直接用)

from: (route路由物件) 當前導航正要離開的路由

next: (function函式) 一定要呼叫該方法來 resolve 這個鉤子。

// 字串

this.router.push('home')

// 物件

this.$router.push();

// 命名的路由

router.push(})

// 帶查詢引數,變成/backend/order?selected=2

this.$router.push(});

// 設定查詢引數

}});// 設計查詢引數物件

let querydata = {};

if (this.$route.query.stage)

if (this.$route.query.url)

this.$router.push();

通俗易懂講解 CAP理論

乙個分布式系統裡面,節點組成的網路本來應該是連通的。然而可能因為一些故障,使得有些節點之間不連通了,整個網路就分成了幾塊區域。資料就散布在了這些不連通的區域中。這就叫分割槽。當你乙個資料項只在乙個節點中儲存,那麼分割槽出現後,和這個節點不連通的部分就訪問不到這個資料了。這時分割槽就是無法容忍的。提高...

通俗易懂的講解Softmax

s of tmax softmax softma x是機器學習中很重要的分類函式。通常位於神經網路的最後一層,它的作用是將前面輸出層的資料轉換為概率分布,這個概率分布的特點就是 任意事件發生的概率在0 1之間,且所有事件發生的概率總和為1,並且總有乙個事件會發生。假設原始的神經網路輸出為y1,y2....

通俗易懂講解迴圈佇列原理

迴圈佇列 環形佇列 顧名思義,為了能夠重複利用佇列,將佇列看作環形,迴圈使用,為什麼判斷隊滿的時候是 rear 1 maxsize呢?我們來簡單理解一下。1,隊空的時候 rear代表能寫入的位置,front代表能讀的位置 當rear front的時候隊列為空 想象當隊列為空的時候,能寫入是第乙個位置...