解析.当深度链接时,路由器无法找到引用文件

Parse.Router cannot find reference files when deep link

本文关键字:引用 文件 引用文 路由器 深度 链接 解析      更新时间:2023-09-26

我一直在慢慢地通过使用parse.js构建一个单页网站,其中包括Parse.Router.

今天我终于克服了这个问题,点击浏览器刷新按钮导致404错误修改我的。htaccess文件。

我现在面临的问题是,如果我导航到"localhost/root/profile/edit",然后单击浏览器刷新按钮,我的页面是可以找到的,但我的资源都没有正确加载。事实上,我在控制台中得到了这个错误:

SyntaxError: expected expression, got '<'

我可以在控制台中看到它试图从"localhost/root/profile/js/file.js"加载我的文件,而不是从它们位于我的根目录中的位置。奇怪的是,当我在"localhost/root/profile"处单击刷新时,一切都加载得很好。只要再深一层,就行不通了。

这是我的。htaccess文件:
<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{THE_REQUEST} ^.*/index.php
    RewriteRule ^(.*)index.php$ $1 [R,L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !^/index'.php
    RewriteRule (.*) index.php
</ifModule>

这是我的app.js文件,加载在我的主index.php文件中:

// app.js
$(function() {
    Parse.$ = jQuery;
    Parse.initialize("xxxx", "xxxx");
    // * ---------
    // * Root View
    // * ---------
    var RootView = Parse.View.extend({
        template: Handlebars.compile($('#root-tpl').html()),
        events:{
        },
        render: function() {
            this.$el.html(this.template());
        }
    });
    // * ------------
    // * Profile View
    // * ------------
    var ProfileView = Parse.View.extend({
        template: Handlebars.compile($('#profile-tpl').html()),
        events: {
            'click .edit-profile': 'edit'
        },
        edit: function(){
            Parse.history.navigate("profile/edit", true);
            return false;
        },
        render: function(){
            var attributes = this.model.toJSON();
            this.$el.html(this.template(attributes));
        }
    });
    // * ------------
    // * Edit View
    // * ------------
    var EditView = Parse.View.extend({
        template: Handlebars.compile($('#edit-profile-tpl').html()),
        render: function(){
            var attributes = this.model.toJSON();
            this.$el.html(this.template(attributes));
        }
    });
    // * ------------
    // * Parse Router
    // * ------------
    var MyRouter = Parse.Router.extend({
        initialize: function(options){
            this.user = Parse.User.current();
            $("body").on("click","a:not(a[data-bypass])",function(e){
                // block the default link behavior
                e.preventDefault();
                // take the href of the link clicked
                var href = $(this).attr("href");
                // pass this link to Parse
                Parse.history.navigate(href,true);
            });
        },      
        start: function(){
            Parse.history.start({
                root: App.ROOT,
                pushState:  true,
                silent:     false
            });
        },
        routes: {
            "":             "root",
            "profile":      "profile",
            "profile/edit": "editProfile",
            "*nf":          "notFound"
        },
        root: function() {
            var rootView = new RootView();
            rootView.render();
            $('.main-container').html(rootView.el);
        },
        profile: function() {
            if (this.user) {
                var profileView = new ProfileView({ model: this.user });
                profileView.render();
                $('.main-container').html(profileView.el);
            }  else {
                this.navigate("root", {trigger: true});
            }
        },
        editProfile: function() {
            var editView = new EditView({ model: this.user });
            editView.render();
            $('.main-container').html(editView.el);
        },
        notFound: function() {
            console.log("in the not found");
        }
    }),
    var App = {
        ROOT: "/root/",
        router: new MyRouter()
    };
    App.router.start();
});

这最终成为我的源文件的src路径的问题。

我正在请求我的源文件,如:

<link href="css/bootstrap.min.css" rel="stylesheet">

当我应该请求他们的时候,比如:

<link href="/root/css/bootstrap.min.css" rel="stylesheet">

一旦我做了这个调整,现在一切似乎都像预期的那样工作。