Плавная навигация по веб-адресам, например http://localhost:60117/ItemDetails?pId=1 не работает

#flutter #flutter-web #flutter-navigation

Вопрос:

В моем проекте flutter я должен поделиться URL-адресом, который напрямую перенаправляет на страницу сведений о конкретном продукте через социальные сети . поэтому я добавил информацию о маршрутизации с помощью velocity_x, моя главная страница.dart выглядит следующим образом

  @override
Widget build(BuildContext context) {
return MaterialApp.router(
  
  debugShowCheckedModeBanner: false,
  title: 'AppName',
  theme: ThemeData(
      primaryColor: MyAppTheme.primaryColor,
      accentColor:MyAppTheme.accentColor
  ),
routeInformationParser: VxInformationParser(),
routerDelegate: VxNavigator(routes: {

  "/": (_,__)=> MaterialPage(child:SplashScreen()),
  "/login": (_,__)=> MaterialPage(child:SignUp()),
  "/home": (_,__)=> MaterialPage(child:Home(selectedIndex: 0)),
  "/ItemDetails": (uri, _){
    final pId=int.parse(uri.queryParameters["pId"]);     
    return MaterialPage(
      child:ItemDetailsFromAdd(
        pId:pId.toString() ,
      
    ));
  },
  
}),
)
 

Мой первоначальный маршрут-заставка, и после проверки подлинности он перенаправляется на страницу входа или домашнюю страницу. когда я нажимаю на определенный элемент, создается URL-адрес «http://localhost:60117/ItemDetails?pId=1» это. Но когда я пытаюсь запустить этот URL-адрес с другой вкладки, сначала он загружает страницу сведений о продукте и внезапно перенаправляет на мой начальный экран.

Я попытался изменить «/» начальный маршрут с «/» на «/» и изменил свой» <base href="/splash/"> «, но сначала выдает ошибку «страница не найдена».

Как я могу получить доступ к странице сведений о продукте напрямую, используя это «http://localhost:60117/ItemDetails?pId=1» URL-адрес в правильном порядке.

Ответ №1:

 onGenerateRoute: (settings) {
      List<String> pathComponents = settings.name.split('/');
      if (pathComponents[1] == 'invoice') {
        return MaterialPageRoute(
          builder: (context) {
            return Invoice(arguments: pathComponents.last);
          },
        );
      } else
        return MaterialPageRoute(
          builder: (context) {
            return LandingPage();
          },
        );
      ;
    },
 

Попробуй вот так

Комментарии:

1. я использую velocity_x для маршрутизации . как я могу добавить этот маршрут onGenerateRoute с помощью этого кода?

Ответ №2:

Попробуйте добавить хэштег # к URL-адресу:

 http://localhost:60117/#/ItemDetails?pId=1
 

Это единственный способ поделиться им, если вы используете прогрессивное веб-приложение. То, что находится слева /#/ , указывает браузеру, откуда получить приложение, а то, что после него, — это логика маршрутизатора. Если вы попытаетесь удалить /#/ приложение , оно не будет вести себя нормально и вернется к маршруту по умолчанию.

Комментарии:

1. можно ли поделиться этим форматом через социальные сети? потому что # используется по-другому в социальных сетях

2. Это единственный способ поделиться им, если вы используете прогрессивное веб-приложение. То, что находится слева /#/ , указывает браузеру, откуда получить приложение, а то, что после него, — это логика маршрутизатора. Если вы попытаетесь удалить /#/ приложение , оно не будет вести себя нормально и вернется к маршруту по умолчанию.

3. я думаю , что он сделал что-то, чтобы удалить # , например, используя url_strategy

4. @Huthaifa Muayyad я добавил#, удалив «setUrlStrategy(путь к стратегии ());», но снова возникла та же проблема. он перенаправляется на начальный маршрут

5. Вам нужно иметь /#/ в вашем URL-адресе, если у вас есть веб-приложение, чтобы оно работало. Это при условии, что у вас правильно настроены маршруты и синтаксический анализ.

Ответ №3:

После долгого тестирования я нашел ответ, здесь мой первоначальный маршрут (‘/’) перенаправляется на экран’. поэтому, когда я пытаюсь получить доступ к определенному элементу с помощью URL-адреса, сначала он попадает на экран, и там я кодирую перенаправление на главную страницу или вход в систему на основе аутентификации пользователя. поэтому, когда я получаю доступ к определенному элементу, используя URL-адрес, он перенаправляется на мой логин/домой. решение заключается в том, что я изменил свой первоначальный маршрут на домашнюю страницу.