Vue中Route的對象參數和常用props傳參

方便跳轉傳參，避免之前傻傻的用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 路由元信息

 

 可以在watch監聽$route查看細節，比如打開某單頁就會觸發該單頁上的$route，看到別人用來加載參數

------------------------------------------------------------------------------------------------------------------------------------------

方便的傳參

方式一（會讓url帶參數，不是很喜歡）：

const router = new VueRouter({
    routes: [
        { 
            path: '/user/:id', 
            component: User, 
            props: true,
　　　　　　　name:'user'

       }
   ]})

A頁面：

this.$router.push('/usr/123') //注入路由器後纔可以使用this.$router

B頁面：

const User = {
    props: ['id'],
    template: '<div>User {{ id }}</div>'
}

 方式二（內存上的傳遞，nice），重點是一個用path，一個是用name

this.$router.push({
    name: 'user',//路由裏面取的名字
    params: {
        user: {
            name: '小明',
            age: 18,
            gender: '男',
        },
　　　　 Id:111
    }
})

翻官方文檔要累死，打開速度還慢，做個筆記