Artikelverzeichnis der Serie
Inhaltsverzeichnis
4. Die neue Seite erhält Parameter
Vorwort
Öffnen Sie eine neue Seite und übertragen Sie Parameter in die neu geöffnete Seite. Sie können das URLSearchParams-Objekt zum Spleißen und Parsen von Parametern verwenden. Der Vue-Router kann zu einer neuen Seite oder zu einem neuen Fenster springen. Öffnen. Die drei Methoden eignen sich für verschiedene Szenarien.
1. Fenster öffnen
Verwenden Sie diese Option , um die angegebene URL in einem neuen Fenster oder einer neuen Registerkarte zu öffnen. window.open()
Die Parameter sind wie folgt:
url(Optional): Die URL der Seite, die in ein neues Fenster oder einen neuen Tab geladen werden soll. Wenn dieser Parameter nicht angegeben wird oder eine leere Zeichenfolge ist, wird das neue Fenster mit einer leeren Seite geöffnet.target(Optional): Gibt an, wo das Zielfenster oder die Zielregisterkarte des Links geöffnet werden soll. Zu den häufig verwendeten Werten gehören:
_blank: Öffnen Sie den Link in einem neuen Tab oder Fenster._self: Link im aktuellen Fenster öffnen (Standardverhalten)._parent: Öffnen Sie den Link im übergeordneten Fenster._top: Öffnen Sie den Link in einem Fenster der obersten Ebene.- Benutzerdefinierter Fenstername: Wenn bereits ein Fenster mit demselben Namen vorhanden ist, wird der Link in dieses Fenster geladen, andernfalls wird ein neues Fenster geöffnet.
windowFeatures(optional): Eine Zeichenfolge mit Fenstereigenschaften, die das Verhalten und Erscheinungsbild des neuen Fensters festlegen. Zu den häufig verwendeten Funktionen gehören:
width: Die Breite des neuen Fensters.height: Die Höhe des neuen Fensters.left: Die linke Position des neuen Fensters.top: Die oberste Position des neuen Fensters.scrollbars: Ob die Bildlaufleiste angezeigt werden soll.resizable: Ob die Größe des neuen Fensters geändert werden kann.fullscreen: Ob ein neues Fenster im Vollbildmodus geöffnet werden soll.- usw.
Beispiel:
//指定新窗口的名称、大小和其他选项window.open('https://www.example.com', '_blank', 'width=800, height=600');
// 在新标签页中打开指定 URL
window.open('https://www.example.com');
// 在具有特定名称的窗口中打开链接（如果不存在，则打开新窗口）
window.open('https://www.example.com', 'myWindow');
// 在指定大小的新窗口中打开链接
window.open('https://www.example.com', '_blank', 'width=800, height=600');Hinweis: Aufgrund von Browser-Sicherheitseinschränkungen blockieren oder blockieren die meisten Browser Popup-Fenster. Um ein Abfangen durch den Browser zu vermeiden , muss das Öffnen eines neuen Fensters durch eine explizite Benutzeraktion ausgelöst werden , beispielsweise durch Klicken auf eine Schaltfläche.
Zweitens, Vue-Router
Offizielle Website: Vue Router | Das offizielle Routing von Vue.js
Dies kommt relativ häufig vor. Im Allgemeinen enthalten Sprungseiten zwei Parameter: Abfrage und Parameter
// 字符串路径
router.push('/users/eduardo')
// 带有路径的对象
router.push({ path: '/users/eduardo' })
// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })
// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })
// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })
Der Unterschied zwischen den beiden:
Abfrageparameter (Abfrageparameter): Abfrageparameter werden über die Abfragezeichenfolge in der URL im Format übergeben
/path?key1=value1&key2=value2. In Vue Router$route.querykönnen Abfrageparameter mit abgerufen und manipuliert werden.Beispiel:
// 跳转到带查询参数的URL this.$router.push({ path: '/path', query: { key1: 'value1', key2: 'value2' } }); // 获取查询参数 console.log(this.$route.query.key1); // 输出：'value1'Der Query- Parameter eignet sich zur Übergabe optionaler, unsensibler Parameter wie Suchbegriffe, Paginierungsinformationen usw.
URL-Parameter (Pfadparameter): Pfadparameter werden über das Pfadsegment in der URL im Format übergeben
/path/:param1/:param2. In Vue Router können Sie$route.paramsPfadparameter abrufen und bearbeiten.Beispiel:
// 跳转到带路径参数的URL this.$router.push({ path: '/path/value1/value2' }); // 获取路径参数 console.log(this.$route.params.param1); // 输出：'value1'
paramsParameter eignen sich zur Übergabe notwendiger und sensibler Parameter wie Ressourcen-IDs, Benutzerinformationen usw.Zusammenfassen:
- Abfrageparameter werden über die Abfragezeichenfolge übergeben und eignen sich für die Übergabe optionaler, unsensibler Parameter.
paramsParameter werden über Pfadsegmente übergeben, die für die Weitergabe notwendiger und sensibler Parameter geeignet sind.
3. URLSearchParams
Erstellen Sie ein URLSearchParams-Objekt und appendfügen Sie ihm mithilfe der Methode Parameter hinzu. Verwenden Sie dann toStringdie Methode, um das URLSearchParams-Objekt in eine Abfragezeichenfolge zu konvertieren und diese an die URL anzuhängen.
const params = new URLSearchParams(); params.append('param1', 'value1'); params.append('param2', 'value2'); params.append('param3', 'value3'); const url = `https://www.example.com/newpage?${params.toString()}`; window.open(url);
4. Die neue Seite erhält Parameter
Es gibt zwei Möglichkeiten, Parameter zu empfangen:
Um den Wert eines URL-Parameters abzurufen, können Sie die Methode
URLSearchParamsdes Objekts verwendenget()// 假设 URL 为 https://example.com/?name=John&age=25&city=New%20York const urlParams = new URLSearchParams(window.location.search); // 获取单个参数的值 const name = urlParams.get('name'); const age = urlParams.get('age'); const city = urlParams.get('city'); console.log(name); // 输出：John console.log(age); // 输出：25 console.log(city); // 输出：New York
In Vue 3 können Sie
useRouterdie Methode verwenden, um das Routenobjekt abzurufen, und dannquerydie Eigenschaft verwenden, um die URL-Parameter abzurufen.import { useRouter } from 'vue-router'; export default { setup() { const router = useRouter(); // 获取 URL 参数 const name = router.query.name; const age = router.query.age; const city = router.query.city; console.log(name); // 输出：John console.log(age); // 输出：25 console.log(city); // 输出：New York // 其他逻辑... return { // 返回组件的响应式数据和方法... }; } };
Zusammenfassen
Die oben genannten Methoden sind mehrere Methoden zum Springen und Öffnen neuer Seiten, die häufig in der Entwicklung verwendet werden. Über den Router werden wir im Folgenden ausführlicher erfahren.