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:

1 Like
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();
}

};

1 Like
6

2.5 years later…

To get the browser address bar to work with the webpack dev server, I had to add this to webpack.config.js:

module.exports = {
    ...
    output: {
        ...
        publicPath: '/',

To match expectations with web apps, I changed routes.js to look like this:

var routes = [
  ...
  {
    path: '/about',
    component: AboutPage,
  },
  {
    path: '/form',
    component: FormPage,
  },

This seems to work. I tested it with URL parameters too. However, now, coincidence or not, my cordova app won’t run on the Android emulator. It freezes on the splash image.

7

Because by default Cordova app runs on file protocol, so when you build for cordova publicPath should be root '' (empty string)

8

Adding this to webpack.config.js seems to help:

 publicPath: (isCordova ? '' : '/') ,

That got me to a 404 page on the cordova Android emulator. To fix that, I made the browserHistory view configuration suggested above depend on the device type:

if (!device.cordova) {
    f7params.view = {
      browserHistory: true,
      browserHistorySeparator: "",
    };
  }

Now my test app works reasonably well on web and android.

9

Normal people don’t edit/type URLs that often, but they do bookmark and share them.