Please Help. Svelte router navigate not working

Questions
1

I really love framework7 to begin with. But it is really frustrating that out on all of components why the hell router navigate not working? but link does on onclick.
i’ve tried f7.view.main.router.navigate(’/someroute’) and f7router.navigate(’/someroute’) but its not working

bellow’s my code:

<script>

import { Page, Link, f7 } from 'framework7-svelte'

export let f7router, f7route

f7router.navigate('/stores')

f7.view.main.router.navigate('/stores')

const navigate = _=> f7.view.main.router.navigate('/stores')

</script>

<template lang="pug">
    Page(name="hello")
        h1 Welcome
        Link(on:click='{navigate}') Working Link
</template>
2

I’m not familiar with the f7 router but I’m confused a little to why are you calling these as soon as the component executes (even before it mounts)?

f7router.navigate('/stores')
f7.view.main.router.navigate('/stores')

What page responds to “/stores”, can we see that?

Also there are a few routers that are very popular for Svelte outside of f7, I always use svelte-routing for example, works just fine with f7, it takes care of mounting and destroying components correctly, you can use markup to define your routes instead of javascript and it’s got path arguments like the f7 router.

And one last thing: I believe the “template” tag is a special tag in html and as far as I know Svelte doesn’t do anything with it, it’ll just mount it, but nothing will show on your dom because that’s the nature of the template tag, unless I’m missing something. Read this.

1 Like
3

Hello @tncrazvan thanks for your reply. I was trying to invoke f7 router’s navigate.
the FF below line. Which suppose to navigate to route but it does no do anything:

f7router.navigate('/stores')
f7.view.main.router.navigate('/stores')

It should respond to to the image below but it doesn’t,

storespage
storespage427×664 11.4 KB

Not sure if svelte-routing works on cordova. Though i tried routify and router-spa and it doesnt seem to work. YRV does because hashes can be used like f7router.

How do you page transition/animation using svelte-routing?

I’m just using template tag to render PUG using svelte-preprocess. I find pug much simpler than html

4

It is not allowed and no sense to call these during component creation:

f7router.navigate('/stores')
f7.view.main.router.navigate('/stores')

You can call .navigate() ONLY after routing is finished

5

@nolimits4web Thank you for your respond. When or where or how should i put the code?

for example verifying jwt then redirect if invalid

axios.post('somelink/auth/')
.then(_=>{
//fetch data
})
.catch(e=>{
 if(e.error === 'invalid token')
 //redirect or navigate
})
6

You may use route’s beforeEnter for such checks https://framework7.io/docs/routes.html#route-before-enter-leave

7

Not sure if svelte-routing works on cordova

It does work.

How do you page transition/animation using svelte-routing?

You just add your transitions to your dom elements as you normaly do.
Transitions in svelte trigger when components are mounted and destroyed, and svelte-routing manages mounting and destroying components for you.

Remember that transitions don’t work on components because in Svelte there’s no guarantee that a component has only one single wrapper like in Vue or React, so you have to add your wrapper manually (a dom element as a wrapper to be more precise).

Here’s an example:

asd
asd428×889 130 KB

This is the entry file (App.svelte)

<script>
import HomePage from './pages/HomePage.svelte';
import { Router, Route } from 'svelte-routing';
import { App, View } from 'framework7-svelte';
import AboutPage from './pages/AboutPage.svelte';
import { scale } from 'svelte/transition';
let url = window.location.pathname;
</script>
<App>
  <View main>
    <Router url="{url}">
      <Route path="/about/:someParameter" let:params>
          <div transition:scale={{duration:200}}>
            <AboutPage {...params}/>
          </div>
      </Route>
      <Route path="/**">
        <div transition:scale={{duration:200}}>
          <HomePage/>
        </div>
      </Route>
    </Router>
  </View>
</App>
<style>
  /* Custom color theme properties */
  :global(:root) {
    --f7-theme-color: #F17010;
    --f7-theme-color-rgb: #ffffff;
    --f7-theme-color-shade: #cc5e0c;
    --f7-theme-color-tint: #f38737;
  }
</style>

this is the home page

<script>
import {
	Page,
	Navbar,
	NavTitle,
	NavRight,
	Link,
	Block,
	Button
} from 'framework7-svelte';
import { navigate } from 'svelte-routing';
</script>

<Page>
	<Navbar>
		<NavTitle>Home Page</NavTitle>
		<NavRight>
			<Link iconIos="f7:search" iconAurora="f7:search" iconMd="material:search"></Link>
		</NavRight>
	</Navbar>
	<br />
	<br />
	<Block class="p-0">
		<div class="grid-x-center">
			This is the home page <br />
			<Button onClick={()=>navigate("/about/hello-world")}>go to about page</Button>
		</div>
	</Block>
</Page>

and this is the about page

<script>
import {
	Page,
	Navbar,
	NavTitle,
	NavRight,
	Link,
	Block,
	Button
} from 'framework7-svelte';
import { navigate } from 'svelte-routing';
export let someParameter;
</script>

<Page>
	<Navbar>
		<NavTitle>About Page</NavTitle>
		<NavRight>
			<Link iconIos="f7:search" iconAurora="f7:search" iconMd="material:search"></Link>
		</NavRight>
	</Navbar>
	<br />
	<br />
	<Block class="p-0">
		<div class="grid-x-center">
			This is the about page, and this is a parmeter: {someParameter} <br />
			<Button onClick={()=>navigate("/")}>go to home page</Button>
		</div>
	</Block>
</Page>

Here’s what the url looks like when you debug it:
asd2

NOTE: if you want your animations to be smooth and not stack on eachother, always use some sort of element/component that covers the whole view, like framework7’s <View></View> component, this will make it so that the stack happens offscreen.

1 Like
8

@tncrazvan cool. I’m trying it now