Question

使用requirejs，我可以使用/register这样的简单路由，但是当我尝试使用/register/1之类的嵌套路由时，我总是会收到错误。

这有效（路线只有/register）：

layout.js

define(['require', 'axios'], (require, axios) => {
  const layout = `
    <div class="container">
      <div class="row">
        <div class="header clearfix">
          <nav style="padding-top: 10px">
            <ul class="nav nav-pills pull-left">
              <li role="presentation">
                <a href="/"><h3>My App</h3></a>
              </li>
            </ul>
            <ul class="nav nav-pills pull-right">
              <li role="presentation"><a href="/login">Login</a></li>
              <li role="presentation"><a href="/register">Register</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  `;

  if (window.location.pathname === '/') {
    window.location.pathname = '/home'
  }

  axios.defaults.headers.common['authorization'] = Cookies.get('token')

  return layout
})

register.js

define(['layout'], layout => {
  if (window.location.pathname === '/register') {
    console.log("Got it") // This works since the route is just '/register'
  }
})

这不起作用（路线为/register/1）：

layout.js

define(['require', 'axios'], (require, axios) => {
  const layout = `
    <div class="container">
      <div class="row">
        <div class="header clearfix">
          <nav style="padding-top: 10px">
            <ul class="nav nav-pills pull-left">
              <li role="presentation">
                <a href="/"><h3>My App</h3></a>
              </li>
            </ul>
            <ul class="nav nav-pills pull-right">
              <li role="presentation"><a href="/login">Login</a></li>
              <li role="presentation"><a href="/register/1">Register</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  `;

  if (window.location.pathname === '/') {
    window.location.pathname = '/home'
  }

  axios.defaults.headers.common['authorization'] = Cookies.get('token')

  return layout
})

register.js

define(['layout'], layout => {
  if (window.location.pathname === '/register/1') {
    console.log("Got it") // Error
  }
})

index.html

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
  <link
  rel="stylesheet"
  type="text/css"
  href="/stylesheets/style.css">

  <link
  rel="stylesheet"
  type="text/css"
  href="/stylesheets/registration.css">

  <link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
  crossorigin="anonymous">

  <link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
  integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
  crossorigin="anonymous">

  <script
  type="text/javascript"
  src="/javascripts/styles/js.cookie.js">
  </script>

  <script data-main="config" src="require.js"></script>
  <script>require(['config'])</script>
</head>
<body>
  <div id="my-app"></div>
</body>
</html>

config.js

requirejs.config({
  baseUrl: 'javascripts/views',
  paths: {
    allConversations: 'allConversations',
    conversation: 'conversation',
    home: 'home',
    layout: 'layout',
    loginView: 'login',
    login: '../scripts/login',
    logoutHandler: '../scripts/logout',
    memberProfile: 'memberProfile',
    profile: 'profile',
    register: 'register',
    conversationCount: 'conversationCount',
    nav: 'nav',
    axios: '//unpkg.com/axios/dist/axios.min',
    jquery: [
      '//code.jquery.com/jquery-3.3.1.min',
      '//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min'
    ],
    bootstrap: ['//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min'],
    fontAwesome: ['//use.fontawesome.com/7973784de3'],
  },
})

require([
  'home',
  'layout',
  'loginView',
  'login',
  'logoutHandler',
  'nav',
  'register'
])

如何使用带有requirejs的嵌套网址路径？

Answer 1

第一个问题。您正在加载config模块两次。 data-main属性指定在RequireJS加载后应加载哪些模块。所以第二行基本上是这个

的副本

<script data-main="config" src="require.js"></script>
<script>require(['config'])</script>

请用

替换它

<script data-main="config" src="require.js"></script>

第二个问题，layout.js中存在语法错误。您的语法看起来像JSX，而不是常规JavaScript。请修改此或使用RequireJS JSX文件加载器插件 - ＆gt; https://github.com/philix/jsx-requirejs-plugin

您能否请您使用config模块？

干杯。

嵌套URL无法使用requirejs

1 个答案: