Vue 3 - refs

HTML

<script src="https://unpkg.com/vue@3.0.0-rc.5/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4.0.5/dist/vue-router.global.js"></script>
<div id="app">
  <router-view></router-view>
</div>

JavaScript

const Home = { template: '<div>Home</div>',
								mounted: function() {
                this.$router.push({
                	name: "about",
                  params: {
                  	user: "User Name",
                    objectParam: {a: "a"}
                  }
                })
                }}
const About = { template: '<div>About</div>',
								props: ['user', 'o', 'objectParam'],
                mounted: function(){
                	console.log( "Passed props:" )
                	console.log( this.$props )
                }}

const routes = [
  { path: '/', component: Home },
  { path: '/about', name:"about", component: About, 
  									props: route => (
                    		console.log("Params defined here are passed as objects."),
                    		console.log("But route params object passed via push has already been stringified."),
                    		console.log(route.params),
                        {
                          o: {b: "b"},
                          ...route.params
                 				})},
]


const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
})

const app = Vue.createApp({})
app.use(router)
app.mount('#app')