Router Address on Enter

Questions
#1

Hi,

I’m having issues with the router when entering the address in the browser address bar.

Using ‘pushState: true’, it correctly displays the path/address in the browser as I navigate through the app (e.g. ‘http://localhost:8081/#!/about/’).

However, if I type or change ‘about’ to ‘form’ and press enter, it does nothing. Interestingly, if I press the browser refresh button (after pressing enter) the page navigates to the form page correctly.

How do I make it navigate to the page I want when I enter any correct URL and press the enter key?

Any help would be most appreciated.

#2

Such behavior is not supported, and it is not a very real usecase, people are not typing URLs manually :slight_smile:

#3

Thanks for the reply, I am interested why you think people should not be able to type URLs?

As I publish the same codebase to apps and browser this is a pretty big deal for me.

It is a standard feature of vue-router to type into the address bar. If it doesn’t work, it looks broken.

This simple example shows it working (you can type about or todos to go to that page): https://codesandbox.io/s/yk76p0vxwz

#4

In F7 it doesn’t work with changing URL hash, because it behaves different rather then chaning page url

#5

I found a solution
in you main view’s onViewInit event handler, check whether the url pathname equal index(’/’), if not navigate to url.pathname and call router.refreshPage()

      <View
    id="view-home"
    browserHistory={true}
    browserHistorySeparator=""
    main
    onViewInit={viewInit}
  />

  const viewInit = (view) => {
const url = new URL(window.location);
if (url.pathname.toLocaleLowerCase() !== "/") {
  console.log(`navigate to ${url.pathname} on init`);
  view.router.navigate(url.pathname);
  view.router.refreshPage();
}

};