I'm creating a web app with NO frameworks/tools/libraries.
(我正在创建一个没有框架/工具/库的Web应用程序。)
Why?(为什么?)
It doesn't matter.(没关系)
All Vanilla JS.
(所有Vanilla JS。)
I'm doing it more of 'React' style.(我正在做更多的“反应”风格。)
I'm wondering, how can I call the view that are in my views/pages/dashboard.js and display that when the user click the dashboard nav link?(我想知道,当用户单击仪表板导航链接时,如何调用我的views / pages / dashboard.js中的视图并显示该视图?)
Perhaps the sub-nav items.
(也许是子导航项。)
What if the user is in the github folder on profile, how would I display that in the url as well?(如果用户位于个人资料上的github文件夹中,该如何在网址中显示呢?)
How can I create a routing for this?
(如何为此创建路由?)
I've read articles an watched YT videos but can't seem to implement it here.(我已阅读了观看过的YouTube视频的文章,但似乎无法在此处实现。)
Here's the GitHUb repo: https://github.com/AurelianSpodarec/JS_GitHub_Replica/tree/master/src/js
(这是GitHUb仓库: https : //github.com/AurelianSpodarec/JS_GitHub_Replica/tree/master/src/js)
All the articles out there.
(所有的文章在那里。)
I'm pretty new so trying to figure this out.
(我很新,所以想弄清楚。)
This is what I've tried
(这就是我尝试过的)
document.addEventListener("DOMContentLoaded", function() {
var Router = function (name, routes) {
return {
name: name,
routes: routes
}
};
var view = document.getElementsByClassName('main-container');
var myRouter = new Router('myRouter', [
{
path: '/',
name: "Dahsboard"
},
{
path: '/todo',
name: "To-Do"
},
{
path: '/calendar',
name: "Calendar"
}
]);
var currentPath = window.location.pathname;
if (currentPath === '/') {
view.innerHTML = "You are on the Dashboard";
console.log(view);
} else {
view.innerHTML = "you are not";
}
});
When the user clicks an item on the nav, show load the view.
(当用户单击导航上的项目时,显示将加载视图。)
So this is the navbar: https://codepen.io/Aurelian/pen/EGJvZW and I want to load the right view and change the url.(所以这是导航栏: https : //codepen.io/Aurelian/pen/EGJvZW ,我想加载正确的视图并更改URL。)
ask by Luigi translate from so
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…