Is it possible to have unique url links using hash navigation for a Web APP?

1

I am using also framework7 to create the web version of the APP presentation and I need to link to internal pages using unique urls links?

Something like:

mydomain.com/#pagelink

or

mydomain.com/pagelink

so when using goes to mydomain.com/#pagelink it is redirected to the internal page called pagelink and it shows that page opened?

is that possible using Framework7?

Thanks

2

https://framework7.io/docs/view.html#view-parameters Push State

1 Like
3

great thanks a lot for the tips I will check it now! :slight_smile:

4

Has you tried to use hash urls to redirect to the page you want?

I tried to use it and works sometimes and stop working without any reason…

when I navigate this url it shows a blank page…

http://mydomain/#!/privacy/

if I visit the website first and load the index.html… using:

http://mydomain/

then I can see my index.html page, then I refresh the page adding to the url /#!/privacy/

http://mydomain/#!/privacy/

then I see the privacy page and not problem!

do you know why going to http://mydomain/#!/privacy/ for the first time it shows a blank page but It works only when I go to http://mydomain/ and then refreshing using http://mydomain/#!/privacy/ ?

do you know what is the problem? or how to solve it? I use cache: false or cache: true, same problem… :frowning:

my app.js code

var app = new Framework7({
  id: 'io.myapp.webapp',
  root: '#app',
  theme: theme,
  cache: false,
  view: {
    pushState: true,
    history: true,
    pushStateRoot: location.href.split(location.host)[1].split('#!')[0],
    routes: [
      {
        path: '/',
        url: './pages/home.html',
        name: 'home',
      },
      {
        path: '/privacy/',
        url: './pages/privacy.html',
        name: 'about',
      },

      // Default route (404 page). MUST BE THE LAST
      {
        path: '(.*)',
        url: './pages/404.html',
      },


    ],
  },
  on: {
    pageInit: function () {
      console.log('page init');
    }
  },

  data: function () {
    return {
      user: {
      },
    };
  },
  methods: {
  },
  routes: routes,
  vi: {
    placementId: 'pltd4o7ibb9rc653x14',
  },
});

my route.js

var routes = [
  // Index page
  {
    path: '/',
    url: './pages/home.html',
    name: 'home',
  },
  {
    path: '/privacy/',
    url: './pages/privacy.html',
    name: 'about',
  },

  // Default route (404 page). MUST BE THE LAST
  {
    path: '(.*)',
    url: './pages/404.html',
  },
];
5

If your app serves from root of the domain, e.g. http://mydomain.com then you need to remove your pushStateRoot parameter

1 Like
6

I will try that way and see what happens thanks for the tips!