I'm using Vuepress 1.5. I was wondering if there is a way to redirect users back to the root path (/) if they navigate to a route that does not exist e.g. /some-unknow-path/new
The default setting for VuePress seems to be to display the 404 page, however, I would prefer to just redirect them to the root path
Turns out the way to do this is to add a default route into the `enhanceApp.js' file as shown below.
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router, // the router instance for the app
siteData // site metadata
}) => {
// ...apply enhancements for the site.
router.addRoute({ path: '/*', redirect: '/' })
}
Related
I am messing around locally with a laravel and vue project, I also have vue-router setup but my URL look like this: <virtual-host>.loc/#/.
Whenever I access my v-host it loads but I get this weird #/ thing appended to the end of the URL. Does anybody know where it comes from? Is it a JS thing?
by default vue js use hash mode. that's why you see that type of url. to change this behavior you need to set mode property to history like this,
const router = new VueRouter({
mode: 'history',
routes: [...]
})
I'm trying to add a chart using this Vue library. I added the dependencies into the Config file. The library asks us to use Vue.use(). But I get Vue is undefined. Any ideas?
https://vuejsexamples.com/lightweight-vue-component-for-drawing-pure-css-donut-charts/
Please use the App Level Enhancments
https://vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements
Belowe text is copied from Vuepress documentation:
App Level Enhancements
Since the VuePress app is a standard Vue app, you can apply app-level enhancements by creating a file .vuepress/enhanceApp.js, which will be imported into the app if it is present. The file should export default a hook function which will receive an object containing some app level values. You can use this hook to install additional Vue plugins, register global components, or add additional router hooks:
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router, // the router instance for the app
siteData // site metadata
}) => {
// ...apply enhancements to the app
}
I am developing a laravel(5.4) application in which i am using vue js(2.0) for SPA, my problem is i want to remove #(hash) from URL.
please suggest me any solution?
This is my HTML
<ul class="category-list">
<li><router-link to="/testlink.html">Tets Link</router-link></li>
<li><router-link to="/demotestlink.html">Demo Test LInk</router-link></li>
</ul>
This is my vue js code
export default new VueRouter({
[
{
path: '/testlink.html',
component:require('./components/demo/Testlink')
}
],
mode: 'history',
});
and i have made a Testlink.vue file inside components/demo folder in Assets
Note: FYI, I am using vue.js(2.0) in Laravel(5.4) Application
From Vue-Router documentation, I found this.
The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.
To get rid of the hash, we can use the router's history mode, which leverages the history.pushState API to achieve URL navigation without a page reload:
const router = new VueRouter({
mode: 'history',
routes: [...]
})
I tried the above and it worked fine for me. For more information read here
I have create a Polymer based Dashboard which I want to integrate with my Laravel site. My Dashboard is working fine but I have issues with routing in Polymer.
I want my Dashboard to reside at:
http://example.com/dashboard
I have set up my Laravel route as follows:
Route::get('dashboard',function(){
return View::make('polymer.dashboard');
});
and my dashboard urls should be like:
http://example.com/dashboard/#!/feedbacks
But, I am confused about what setting to make in app.js. Current app.js:
// Sets app default base URL
app.baseUrl = '/';
if (window.location.port === '') { // if production
// Uncomment app.baseURL below and
// set app.baseURL to '/your-pathname/' if running from folder in production
//app.baseUrl = '/dashboard/';
}
Under these settings, when I navigate to http://example.com/dashboard, when Polymer finishes loading, the url changes to http://example.com/.
If you haven't told the router to not use hashbangs then navigating to /dashboard won't work, it's expecting #!. You'll need to go into app/elements/routing.html and remove the line that says hashbangs: true. You'll also need to set the baseUrl to /dashboard/. Your server will also need to always return the index.html for any URL that starts with dashboard. So if the user tries to go to example.com/dashboard/feedback it should send down the index.html page again.
After you've made the change to routing.html, go into the devtools settings and enable Disable cache (with dev tools open). Then reload the app to make sure it isn't serving a cached version of the file.
Only root route works. /about, /home shows "Cannot GET /home" in browser. If i replace each route path with "/" then the corresponding component is rendering. But there seems to be problem when i try to render certain route eg /home.
You have to configure your server to work with Router.HistoryLocation -- that is, it needs to always serve your index.html page regardless of the route.
app.get('*', function (req, res) {
res.render('index');
});
Check out the docs here: React Router Docs - HistoryLocation