Question

我在Mvc app中遇到angularJs ui-routing的问题。我已经看到有关这个问题的几个问题。特别是This question似乎正在解决我的问题。但是我无法导航到不同的路线。

在我的观看/主页/ Index.cshtml中：

 @{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<base href="/">

<h1> Index Page</h1>

<a ui-sref="login">login</a>

<ui-view></ui-view>

在我的Angular / app.js中：

  var myApp = angular.module("myApp", ['ui.router']);

myApp.controller("LoginController", LoginController);


 myApp.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {

     $stateProvider
         .state('login', {
             url: '/Login',
             templateUrl: '/home/Login',
             controller: LoginController,
             controllerAs: 'controller'
         })

            .state('Index', {
                url: '/',
                templateUrl: '/home/index'
            })
     // Handle request for non-existent route
     //$urlRouterProvider.otherwise('/home');

     $locationProvider.html5Mode({
         enabled: true,
         requireBase: false
     });


 });

在Login.cshtml中：

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
} 
    <p> Login Page</p>  

<a ui-sref="Index">Index</a>

Route.config

public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }
    }

在我的观看次数/ shared / _layout.cshtml中：

<body ng-app="myApp">

可能相关的问题：

$ locationProvider.html5Mode（true）和$ locationProvider.hashPrefix（＆＃39;！＆＃39;）。html5Mode（true）如何适应图片？

Answer 1

您正在使用href导航到登录状态，这是错误的。您应该使用ui-sref指令

<a ui-sref="login">login</a>

您还应该使用ui-view指令来显示您要定位的状态。

官方文档包含short, simple tutorials，可帮助您入门。

ui-router，无法导航到另一条路线

1 个答案: