Load template into panel

How can I load a template into side panel ?

I’ve tried this

$$(’.panel-left’).on(‘panel:open’, function () {

app.router.load({ url:’/panel/’});

});

and it throws 404 not found for /panel/

in my routes.js

    {
        path: '/panel/',
        componentUrl: './panel.html',
        name: 'panelPage',
    },

then i’ve tried to load it directly into the view

var panel = app.views.create(’.view-panel’);
var panelView = app.views.panel;

$$(’.panel-left’).on(‘panel:open’, function () {

panelView.router.load({ url:’/login/’});

});

this throws

app.js:27 Uncaught TypeError: Cannot read property ‘router’ of undefined

Can someone help me out here please?

okay so partially managed to get it to work

var panel = app.views.create(’.view-panel’);

then

$$(’.panel-left’).on(‘panel:open’, function () {
panel.router.load({ url :‘panel.html’});
});

but it will only allow me to load panel.html if it doesn’t contain in my routes.js
{
path: ‘/panel/’,
componentUrl: ‘./panel.html’,
name: ‘panelPage’,
}

so updated question would be how do i load the template page into a panel? at the moment i can load html page but not a component page…

You need to leave panelView empty, set its initial url to /panel/, and in your routes:

{
path: '/panel/',
componentUrl: './panel.html',
}

http://framework7.io/docs/view.html#initial-page-route

Dude thanks man! v2/3 is amazing!! i’ve had an app ready to launch in v1 and i’ve stopped the launch to redo it in v3