Một tính năng của vue-router v3 (Vue 2) mình khá hay dùng là di chuyển đến route khác bằng this.$router.push. Method này cho phép truyền vào các params mà không cần được định nghĩa trên path, và có thể là kiểu object:

this.$router.push({
	name: 'UserView',
	params: {
		user: { id: 1, name: 'Admin' },
	},
});

Từ đó mình có thể pass props cho component sẽ di chuyển đến:

// router.js
const router = new VueRouter({
	routes: [
		{
  			path: '/user',
  			name: 'UserView',
            component: UserView,
  			props: (route) => ({ id: route.params.id, name: route.params.name }),
		}
	],
});

Tuy nhiên v4 không còn cho phép điều này, chỉ cho phép push param nào mà được định nghĩa trên path. Lý do vue-router đưa ra là vì nó là anti pattern, một trong số đó là khi reload page (bằng F5 hoặc enter address) thì sẽ mất các data param đó, vì nó không thực sự tồn tại trên URL.

Vue-router đưa ra 4 cách để khắc phục:

1. Đưa data cần pass lên store.
2. Định nghĩa param muốn pass lên path, hoặc pass qua query.
3. Pass data thông qua History API state.
4. Pass data qua meta.

Cách (1) mất thời gian implement mà reload page vẫn mất data, (2) mình không muốn hiện param đó lên URL, (4) không cho phép pass meta từ chỗ gọi method push. Nên mình áp dụng cách 3:

route.push({
	name: 'NoteView',
	params: { permalink: note.permalink },
	state: { v: note.publishedVersion },
});

// router.js
const routes = [
    {
      path: '/note/:permalink',
      name: 'NoteView',
      component: NoteView,
      props: (route) => ({ permalink: route.params.permalink, v: history.state.v }),
	}
];