vue router總結(jié) $router和$route及router與 router與route區(qū)別

1 this.$router和this.$route的區(qū)別

vue router

this.$router是VueRouter的實(shí)例方法，當(dāng)導(dǎo)航到不同url，可以使用this.$router.push方法，這個(gè)方法則會(huì)向history里面添加一條記錄，當(dāng)點(diǎn)擊瀏覽器回退按鈕或者this.$router.back()就會(huì)回退之前的url。
this.$route相當(dāng)于當(dāng)前激活的路由對(duì)象，包含當(dāng)前url解析得到的數(shù)據(jù)，可以從對(duì)象里獲取一些數(shù)據(jù)，如name,path等。

2 路由跳轉(zhuǎn)分為編程式和聲明式

聲明式

//路由入口
<router-link :to="...">
//視圖出口
<router-view></router-view>
//路由入口
<router-link :to="...">
//視圖出口
<router-view></router-view>

當(dāng)你想在一個(gè)頁(yè)面嵌套子路由，并且不跳轉(zhuǎn)頁(yè)面的時(shí)候，我覺(jué)得這個(gè)超好用啊，子頁(yè)面就會(huì)渲染在router-view的地方

編程式

// 字符串
router.push('home')
// 對(duì)象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 帶查詢參數(shù)，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

// 字符串
router.push('home')
// 對(duì)象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 帶查詢參數(shù)，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

但是一定要注意啊，如果你提供了path,那么params和query的配置就會(huì)被忽略的

3 path:'name'和path:'/name'的區(qū)別

如果加/則會(huì)被當(dāng)作跟目錄，否則當(dāng)前的路徑會(huì)嵌套在之前的路徑中

//比如當(dāng)前路徑是home
this.$router.push({path:'name'})//==>path為/home/name
this.$router.push({path:'/name'})//==>path為/name
//比如當(dāng)前路徑是home
this.$router.push({path:'name'})//==>path為/home/name
this.$router.push({path:'/name'})//==>path為/name

ps:下面看下vue中router與 router與route區(qū)別

vue-router中經(jīng)常會(huì)操作的兩個(gè)對(duì)象route和 route和router兩個(gè)。

1、$route對(duì)象

$route對(duì)象表示當(dāng)前的路由信息，包含了當(dāng)前 URL 解析得到的信息。包含當(dāng)前的路徑，參數(shù)，query對(duì)象等。
**1.$route.path**
      字符串，對(duì)應(yīng)當(dāng)前路由的路徑，總是解析為絕對(duì)路徑，如 "/foo/bar"。
**2.$route.params**
      一個(gè) key/value 對(duì)象，包含了 動(dòng)態(tài)片段 和 全匹配片段，
      如果沒(méi)有路由參數(shù)，就是一個(gè)空對(duì)象。
**3.$route.query**
      一個(gè) key/value 對(duì)象，表示 URL 查詢參數(shù)。
      例如，對(duì)于路徑 /foo?user=1，則有 $route.query.user == 1，
      如果沒(méi)有查詢參數(shù)，則是個(gè)空對(duì)象。
**4.$route.hash**
      當(dāng)前路由的 hash 值 (不帶 #) ，如果沒(méi)有 hash 值，則為空字符串。錨點(diǎn)
**5.$route.fullPath**
      完成解析后的 URL，包含查詢參數(shù)和 hash 的完整路徑。
**6.$route.matched**
      數(shù)組，包含當(dāng)前匹配的路徑中所包含的所有片段所對(duì)應(yīng)的配置參數(shù)對(duì)象。
**7.$route.name    當(dāng)前路徑名字**
**8.$route.meta  路由元信息

route object 出現(xiàn)在多個(gè)地方:

•組件內(nèi)的 this.route和 route和route watcher 回調(diào)（監(jiān)測(cè)變化處理）;
•router.match(location) 的返回值
•scrollBehavior 方法的參數(shù)
•導(dǎo)航鉤子的參數(shù)：

router.beforeEach((to, from, next) => {
 // to 和 from 都是 路由信息對(duì)象,后面使用路由的鉤子函數(shù)就容易理解了
})

2、$router對(duì)象

$router對(duì)象是全局路由的實(shí)例，是router構(gòu)造方法的實(shí)例。

路由實(shí)例方法：

1、push

// 字符串
   this.$router.push('home')
// 對(duì)象
   this.$router.push({ path: 'home' })
// 命名的路由
   this.$router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢參數(shù)，變成 /register?plan=123
   this.$router.push({ path: 'register', query: { plan: '123' }})

push方法其實(shí)和<router-link :to="...">是等同的。

 注意：push方法的跳轉(zhuǎn)會(huì)向 history 棧添加一個(gè)新的記錄，當(dāng)我們點(diǎn)擊瀏覽器的返回按鈕時(shí)可以看到之前的頁(yè)面。

2、go

// 頁(yè)面路由跳轉(zhuǎn) 前進(jìn)或者后退
this.$router.go(-1) // 后退

3、replace

 //push方法會(huì)向 history 棧添加一個(gè)新的記錄，而replace方法是替換當(dāng)前的頁(yè)面，
 不會(huì)向 history 棧添加一個(gè)新的記錄

05

// 一般使用replace來(lái)做404頁(yè)面
this.$router.replace('/')

配置路由時(shí)path有時(shí)候會(huì)加 '/' 有時(shí)候不加,以'/'開(kāi)頭的會(huì)被當(dāng)作根路徑，就不會(huì)一直嵌套之前的路徑。

總結(jié)

以上所述是小編給大家介紹的vue router總結(jié) $router和$route及router與 router與route區(qū)別 ,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

最新評(píng)論