chore: add required flag for Route name field (#2025)

diff --git a/docs/en/latest/FAQ.md b/docs/en/latest/FAQ.md
index 5ed4834..dfc0766 100644
--- a/docs/en/latest/FAQ.md
+++ b/docs/en/latest/FAQ.md
@@ -108,4 +108,4 @@
 
 ### 7. What is the default strategy when import a duplicate route?
 
-Currently we reject import duplicate route, that is to say when you import a route which has the same attributes, all of the URI、Host、URIs、Host、RemoteAddrs、RemoteAddr、Priority、Vars and FilterFunc, as the existing route, you will get an error while importing a route from OAS3.0.
+Currently we reject import duplicate route, that is to say when you import a route which has the same attributes, all of the `uri` `uris` `host` `hosts` `remote_addr` `remote_addrs` `priority` `vars` and `filter_func`, as the existing route, you will get an error while importing a route from OAS3.0.
diff --git a/web/cypress/integration/route/check-route-required-field-flag.spec.js b/web/cypress/integration/route/check-route-required-field-flag.spec.js
new file mode 100644
index 0000000..13e2a64
--- /dev/null
+++ b/web/cypress/integration/route/check-route-required-field-flag.spec.js
@@ -0,0 +1,53 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* eslint-disable no-undef */
+
+context('Check Route Required Field Flag', () => {
+  beforeEach(() => {
+    cy.login();
+  });
+
+  it('should exist required flag for Route name', function () {
+    cy.visit('/');
+    cy.contains('Route').click();
+    cy.contains('Create').click();
+    cy.get('label[title="Name"]')
+      .then($els => {
+        // get Window reference from element
+        const win = $els[0].ownerDocument.defaultView
+        // use getComputedStyle to read the pseudo selector
+        const before = win.getComputedStyle($els[0], 'before')
+        // read the value of the `content` CSS property
+        const contentValue = before.getPropertyValue('content')
+        // the returned value will have double quotes around it, but this is correct
+        expect(contentValue).to.eq('"*"')
+      })
+  });
+
+  it('should exist required flag for Route path', function () {
+    cy.visit('/');
+    cy.contains('Route').click();
+    cy.contains('Create').click();
+    cy.get('label[title="Path"]')
+      .then($els => {
+        const win = $els[0].ownerDocument.defaultView
+        const before = win.getComputedStyle($els[0], 'before')
+        const contentValue = before.getPropertyValue('content')
+        expect(contentValue).to.eq('"*"')
+      })
+  });
+});
diff --git a/web/src/pages/Route/components/Step1/MetaView.tsx b/web/src/pages/Route/components/Step1/MetaView.tsx
index be4159d..deaa343 100644
--- a/web/src/pages/Route/components/Step1/MetaView.tsx
+++ b/web/src/pages/Route/components/Step1/MetaView.tsx
@@ -109,7 +109,7 @@
   };
 
   const Name: React.FC = () => (
-    <Form.Item label={formatMessage({ id: 'component.global.name' })} tooltip={formatMessage({ id: 'page.route.form.itemRulesPatternMessage.apiNameRule' })}>
+    <Form.Item label={formatMessage({ id: 'component.global.name' })} required tooltip={formatMessage({ id: 'page.route.form.itemRulesPatternMessage.apiNameRule' })}>
       <Row>
         <Col span={10}>
           <Form.Item