How to display a non-main View in svelte

I am using framework7-svelete starter app, and the app runs fine. I am now attempting to create a view as followes:


  import {
    App,    Block,    BlockFooter,    BlockTitle,    f7,    f7ready,    Link,
    List,    ListButton,    ListInput,    ListItem,    LoginScreen,    LoginScreenTitle,    Navbar,    NavRight,    Page,    Panel,    Popup,
    Toolbar,    View,    Views,
  } from 'framework7-svelte'

  import regisrationRoutes from './registration.routes'

  let f7Params = {
    name: 'Registration',
    theme: 'auto',
    routes: regisrationRoutes

  function gotoName() {
    // f7ready.views.registration.router.navigate('/registration/patient/name/')


<View name = 'registration'
      url = '/registration/patient/name/' >


let registrationRoutes = [
    path: '/registration/patient/address/',
    component: AddressPage,

    path: '/registration/patient/name/',
    component: NamePage,

    component: RegistrationPage

name.svelte - simple page

My folder structure is demonstrated in the graphic below

project folder structure

How can I display this registration.view.svelte?

Seems like you miss understood a bit meaning of the View.

View - is a separate visual part of the app with its own settings, navigation and history. So it is some kind of app in app. Such kind of functionality allows you easily manipulate each part of your app

So you shouldn’t somehow load the View. You can load Pages into Views. It is better to manage all Views in main App component, somehow like:

  {#if loggedIn}
    <View main url="/" />
    <View main url="/login/" />

Agreed about the misunderstanding. Thanks for your patients.

I have the following view in the app.svelt file


      name = 'registration'
      routes = {registrationRoutes}
      url = '/registration/'/>

The routes are the same as mentioned above.


  import {
    f7,  AccordionContent,  Block,  BlockTitle, Button,  Link,  List,
    ListButton, ListInput,ListItem,  Navbar,  Page,  Range,  Row,
    Tab,  Tabs,  Toolbar,  Toggle,
  } from 'framework7-svelte'

  let router = f7.views.registration.router
  let isTop = true

<Page name = 'registration'
      pageContent = {false}>
  <Navbar title = 'New Registration'
          backLink = 'Back'/>
  <Toolbar tabbar
           position = {isTop ? 'top': 'bottom'}>
    <Link tabLink = '#patient'
          text = 'Patient'
          iconMd = 'material:email'/>

    <Tab tabActive
         id = 'patient'
         class = 'page-content'>
            href = '/registration/patient/address/'
            title = 'Address'/>

The problem is that the address url ‘/registration/patient/address/’ does not open the address page, but the 404.svelte page is open instead.

How can I get the registration view to open the attached routes in itself?

The ’ console.log(router)’ statement above gives me the main (default) router of app.svelte.


1 Like

When you calling router’s navigate or have a link, it will open a page in this router -> in this View. If you are trying to click a link in one view and you have in your app another view where you want to open it -> then you need to specify in what view link should load the page. It is done with view prop on link