Sample web page using vuejs + vue-router just for fun.
Good example for starter and learning Vue Js easily and fastly. (Just in 10 minutes)
<router-link> is a replacement for <A> tag.
Example:
<router-link to="/your_link_at_here">Label</router-link>
One example:
const routes = [
{ path: '/:lang?', component: HomePage },
{ path: '/:lang/search', component: SearchPage },
{ path: '/:lang/:cat', component: CategoryPage },
{ path: '/:lang/:cat/:app', component: ApplicationPage },
{ path: '/:lang/*', component: NotFoundComponent },
{ path: '*', component: NotFoundComponent }
]
The following url will be identified:
//en//ar//de//fr//en/category_name//ar/sample_name-testing//en/war/name_of_application_or-game//en/search//dfg/dfg/dfg/dfg/dfg/dfg/df/gd/fgdf/g- Others will be 404 error...
https://github.com/BaseMax/FirstVueRouter/blob/master/asset/script.js
$ node serve.js
And open http://localhost:8282/ in the Browser.
location / {
try_files $uri $uri/ /index.html;
}
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Read more: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
VueJs:
Vue-Router:
Read more: https://router.vuejs.org/installation.html
HTML5 History Mode
const router = new VueRouter({
mode: 'history',
routes: routes,
})
Read more:
- https://forum.vuejs.org/t/why-vue-router-html5-history-mode/82767/3
- https://router.vuejs.org/guide/essentials/history-mode.html
https://github.com/BaseMax/FirstVuejs
My nickname is Max, Programming language developer, Full-stack programmer. I love computer scientists, researchers, and compilers. (Max Base)
