vue router總結 $router和$route及router與 router與route區別

1 this.$router和this.$route的區別

vue router

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

2 路由跳轉分為編程式和聲明式

聲明式

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

當你想在一個頁面嵌套子路由，并且不跳轉頁面的時候，我覺得這個超好用啊，子頁面就會渲染在router-view的地方

編程式

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

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

3 path:'name'和path:'/name'的區別

如果加/則會被當作跟目錄，否則當前的路徑會嵌套在之前的路徑中

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

ps:下面看下vue中router與 router與route區別

vue-router中經常會操作的兩個對象route和 route和router兩個。

1、$route對象

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

route object 出現在多個地方:

•組件內的 this.route和 route和route watcher 回調（監測變化處理）;
•router.match(location) 的返回值
•scrollBehavior 方法的參數
•導航鉤子的參數：

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

2、$router對象

$router對象是全局路由的實例，是router構造方法的實例。

路由實例方法：

1、push

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

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

 注意：push方法的跳轉會向 history 棧添加一個新的記錄，當我們點擊瀏覽器的返回按鈕時可以看到之前的頁面。

2、go

// 頁面路由跳轉 前進或者后退this.$router.go(-1) // 后退

3、replace

 //push方法會向 history 棧添加一個新的記錄，而replace方法是替換當前的頁面， 不會向 history 棧添加一個新的記錄

05

// 一般使用replace來做404頁面this.$router.replace('/')

配置路由時path有時候會加 '/' 有時候不加,以'/'開頭的會被當作根路徑，就不會一直嵌套之前的路徑。

總結

以上所述是小編給大家介紹的vue router總結 $router和$route及router與 router與route區別 ,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！