對于Vue內部來說，不管是根組件還是子組件，都存在this.$router和this.$route兩個屬性，它們的區別如下:
$router 指向當前的VueRouter實體，也就是new Vue({router:router})這里傳入的router實體物件,可以使用上一節里列出的VueRouter實體的屬性和方法
$route 指向當前跳轉的路由物件,是一個包含當前的路由資訊的物件,<router-view/>組件會通過這個屬性來獲取需要渲染的組件
對于$router來說，它包含了如下屬性
- path ;當前路由的路勁,總是決議為絕對路勁 ;例如:/foo/bar
- params ;物件型別,包含了動態片段和全匹配片段，如果沒有路由引數就是一個空物件
- query ;物件型別，表示URL查詢引數，對于/foo/user=1來說，$route.query.user等于1，如果沒有查詢引數，則是個空物件
- hash ;當前路由的hash值(帶#),如果沒有hash值，則為空字串
- fullPath ;決議完成后的URL,包含查詢引數和hash的完整路勁
- matched ;一個陣列，包含當前路由的所有嵌套路勁片段的路由記錄，也就是所有父路由物件都在這個陣列里面，<router-view/>組件會用到這個屬性
- name ;當前路由的名稱 ;和命名別名有關
- redirectedFrom ;重定向來源的路由的名字 ;和重定向及別名有關，
- meta ;meta值
name、meta這兩個值就是創建vuerouter時，傳入的router屬性對應的每條路由記錄的name和mata屬性，其它的一般經過一些處理
writer by:大沙漠 QQ:22969969
舉個栗子:
<div id="app"> <router-link to="/login">登陸</router-link> <router-link to="/info/15">詳情頁</router-link> <hr/> <router-view></router-view> </div> <script> const login = { template:'<div>Login Page!</div>'} const info = { template:'<div>id:{{this.$route.params.id}}</div>'} const routes = [ {path:'/login',component:login,name:'login'}, {path:'/info/:id',component:info,name:'info'}, ] const app = new Vue({ el:'#app', router:new VueRouter({routes}) }) </script>
渲染如下:
我們點擊登陸路由到登陸頁面，控制臺輸入app.$route，然后點擊詳情頁，控制臺再輸入app.$route，列印分別如下:
Login頁面:
Info頁面:
經常用到這個$route物件的地方就是在導航守衛里，引數2的to就是這個$route物件，
VueRouter安裝的時候會執行它的install方法，該方法如下:
Object.defineProperty(Vue.prototype, '$router', { //Vue實體的$router指向了this._routerRoot._router
get: function get () { return this._routerRoot._router }
});
Object.defineProperty(Vue.prototype, '$route', { //設定$route為this.$root._route
get: function get () { return this._routerRoot._route }
});
通過執行Object.defineProperty，我們在Vue內部訪問this.$router和this.$route都一直指向了this._routerRoot._router和this._routeRoot._route，而這兩個屬性是在VueRouter在安裝的時候混入到Vue的beforeCreate生命周期函式內實作的，如下:
beforeCreate: function beforeCreate () { if (isDef(this.$options.router)) { //如果this.$options.router存在 ;就是在創建Vue實體時傳入的router物件 this._routerRoot = this; //在Vue實體上添加一個_routerRoot指向自己，即Vue實體 this._router = this.$options.router; //在Vue實體上添加一個_router指向構造時的vue-router實體 this._router.init(this); //vue-router實體呼叫init()進行初始化，引數為Vue實體 Vue.util.defineReactive(this, '_route', this._router.history.current); //通過Vue的defineReactive把_router變成回應式，等于this._router.history.current } else { this._routerRoot = (this.$parent && this.$parent._routerRoot) || this; } registerInstance(this, this); },
this._router.history.current等于VueRouter實體.history.current屬性，在每次路由跳轉后都會執行History原型上的updateRoute方法，會在該方法內重置current屬性，路由物件的創建如下：
function createRoute(record, location, redirectedFrom, router) { //創建一個路由物件 record:路由記錄資訊 location:需要跳轉的路由地址(包含path、query、hash和params的物件) redirectedForm:未知 router:Vue-Router實體 var stringifyQuery$$1 = router && router.options.stringifyQuery; var query = location.query || {}; //重置query,如果未設定則重置為空物件 try { query = clone(query); } catch (e) {} var route = { //添加一個route物件 name: location.name || (record && record.name), //name資訊 meta: (record && record.meta) || {}, //meta資訊 path: location.path || '/', hash: location.hash || '', //路由的路勁 query: query, //路由的hash params: location.params || {}, //路由的params fullPath: getFullPath(location, stringifyQuery$$1), //完整路勁 matched: record ? formatMatch(record) : [] //記錄record 從當前到父節點一直到祖先節點的所有record }; if (redirectedFrom) { route.redirectedFrom = getFullPath(redirectedFrom, stringifyQuery$$1); } return Object.freeze(route) //最后將route物件凍結并回傳(即不允許新增屬性) }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/5401.html
標籤：HTML5