I am trying to set up a vue-router for an application in Vue 2/rails. I installed vue-router through yarn =>
yarn add vue-router@2
That's my router =>
import { createWebHistory, createRouter } from "vue-router"
import PageHome from '../components/PageHome.vue'
import TermsAndConditions from '../components/TermsAndConditions.vue'
const routes = [
{
path: "/",
name: "PageHome",
component: PageHome,
},
{
path: "/terms-conditions",
name: "TermsAndConditions",
component: TermsAndConditions
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
and that's my application file
import Vue from 'vue/dist/vue.esm'
import router from '../router/index'
Vue.use(router)
import PageHome from '../components/PageHome.vue'
import TermsAndConditions from '../components/TermsAndConditions.vue'
const images = require.context('../images', true)
require('../stylesheets/application.scss')
document.addEventListener('DOMContentLoaded', () => {
if(document.getElementById('v-app')) {
new Vue({
el: '#v-app',
store,
components: {
PageHome,
TermsAndConditions
}
})
}
})
I have added those lines in a file where I want to see the links.
<router-link to="/">Home</router-link>
<router-link to="/TermsAndConditions">Terms and conditions</router-link>
<router-view/>
That's what is in my package.json =>
"vue": "^2.6.12",
"vue-loader": "^15.9.6",
"vue-router": "2",
"vue-template-compiler": "^2.6.12",
"vue-turbolinks": "^2.2.2",
Unfortunately I get this error message and I don't really know what to do with it.
Failed to compile.
./app/javascript/router/index.js 13:15-27
"export 'createRouter' was not found in 'vue-router'
Any help is very welcome !!
For Vue 2 projects you have to call Router.
import Router from 'vue-router';
const router = new Router({
...
})
export default router
createRouter is for Vue 3 projects(Vue Router v4).
Can't find documentation for VueRouter2, but in VueRouter3 you have to do it like this:
import VueRouter from 'vue-router';
...
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Home },
{ path: '/foo', component: Foo }
]
})
The code you send as a question is for VueRouter4 that's used with Vue3