vue router的$router和$route及router與 route的區別

$route是“路由信息對象”，是一個局部對象，其包含name、path、fullpath、params、query、hash、matched等路由信息。

而$router“路由實例”，是一個全局對象，其包含了路由的跳轉方法，鉤子函數等。

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=private
router.push({ path: 'register', query: { plan: 'private' }})

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

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

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

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

//比如當前路徑是home
this.$router.push({path:'name'})//==>path爲/home/name
this.$router.push({path:'/name'})//==>path爲/name
//比如當前路徑是home
this.$router.push({path:'name'})//==>path爲/home/name
this.$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 棧添加一個新的記錄

重定向 

// 一般使用replace來做404頁面

this.$router.replace('/')

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