I am facing the need to operate Vue router in its default mode, known as hash mode, and unable to use it in history mode. In this mode, all my dynamic routes have a leading hash, like http://myurl.com/#/highlights. However, removing that initial hash, such as http://myurl.com/highlights, causes the website to malfunction with the error message no input file specified.
My objective is to ensure that if none of the routing conditions match and the user is not authenticated, they are redirected to the login screen. Additionally, if the user is authenticated but no routes match, they should be sent to the home page.
Below is the content of my router.js:
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Programs from './views/Programs.vue'
import Sizzle from './views/Sizzle.vue'
import Login from './views/Login.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
redirect: {
name: "login"
}
},
{
path: "/login",
name: "login",
component: Login,
},
{
path: '/highlights/:slug?',
name: 'home',
component: Home,
props: (route) => ({ slug: route.params.slug || categories[0].slug })
},
{
path: '*',
redirect: {
name: "login"
}
}
]
})
*Please note that the variable categories is created globally as a JavaScript variable before any Vue.js files are loaded using a script tag.