嵌套URL不适用于requirejs_Requirejs

嵌套URL不适用于requirejs

requirejs

嵌套URL不适用于requirejs,requirejs,Requirejs,使用，我可以使用像/register这样的简单路由，但是当我尝试像/register/1之类的嵌套路由时，总是会出错这是有效的（当路径正好是/register）： layout.js define(['require', 'axios'], (require, axios) => { const layout = ` <div class="container"> <div class="row"> <div clas

使用，我可以使用像

/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
})

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

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
})

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

<!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>

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'
])

这不起作用（路线为

/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">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
})

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

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
})

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

<!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>

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'
])

index.html

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
})

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

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
})

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

<!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>

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中使用嵌套URL路由？第一个问题。您正在加载

config

模块两次

data main

属性指定在RequireJS加载之后应该加载哪些模块。所以第二行基本上是这个的复制品

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


需要（['config']））

请将此替换为“仅”

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

第二个问题是，

layout.js

中存在语法错误。您的语法看起来像JSX，而不是普通的JavaScript。请修改此内容或使用RequireJS JSX文件加载程序插件->

您能展示一下您使用的

config

模块吗

干杯。

我不明白。代码会抛出错误吗？或者它只是不执行条件的主体？您可以

控制台.log

位置.pathname吗？它不执行主体。它抛出两个错误，都指向我的

index.html

文件<代码>未捕获的SyntaxError:意外标记感谢您的帮助。删除第二行修复了一个错误，但修复了另一个错误（

uncaughtsyntaxerror:Unexpected-token）