I am working with VueJs 2, and I am trying to get routing to work, so bassically if I go to URL/test/5, the ID will equal 5 and then for now, the component should simply display 5 on the main page.
Right now this is what my routes.js file looks like:
import test from '@/components/test_token'
import Home from '@/views/Home'
export default[
{
path: "/",
name: "Home",
component: Home
},
{
path: '/test/:id',
component: test_token
}
]This is what test_token.vue looks like:
<template>
<div>User {{ $route.params.id }}</div>
</template>
<script>
export default {
name: 'test_token',
data() {
return {
id: this.$route.params.id
};
},
}
</script>And this is what my main.js file is looking like:
import Vue from 'vue'
import App from './App.vue'
import Routes from './routes'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: Routes,
mode: 'history'
});
new Vue({
el: '#app',
render: h => h(App),
router: router
})What I am having trouble with is I have no idea how to trouble shoot this problem, because when I go to the page url/test/10, for example, it is just a completely blank page that displays nothing. ALso I am currently on vue version 2.7.10 and vue router 3.5.4.
My desired result is to see something like this when I go to url/test/10:
<div>User 10</div>