angular.js - Hanya laluan dengan #, angularjs dan vuejs boleh mengenal pasti laluan?

Question

Dalam Sudut

Ini adalah laluan saya:

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]);

Ini ialah htmlkod saya:

<a href="#/phones/{{phone.id}}">{{phone.name}}</a>

Atribut

href bermula dengan nombor # Apabila nombor # ini disertakan, penghalaan akan berfungsi seperti biasa. Jika anda mengalih keluar nombor #, laluan tidak akan menemui laluan:

Not found

Perkara yang sama berlaku dalam vuejs

Apabila saya menggunakan vuejs dan vue-router, ini ialah laluan saya:

var router = new VueRouter();
router.map({
    "/": {
        component: phoneList
    },
    "/phones": {
        component: phoneList
    },
    "/phones/:phoneId": {
        component: {
            template: 'TBD: detail view for <span>{{$route.params.phoneId}}</span>',
        }
    }

});
router.start(app, "#app");

Ini ialah html:

<a href="#/phones/{{phone.id}}">{{phone.name}}</a>

Begitu juga, penghalaan dengan nombor # berfungsi seperti biasa

Cannot GET /phones/motorola-xoom-with-wi-fi

Mengapa ini berlaku? Apakah sebenarnya yang dilakukan oleh nombor

ini? # Mengapakah
tidak boleh dikenali tetapi http://localhost:8000/phones/motorola-xoom boleh dikenali? http://localhost:8000/app/index.html#/phones/motorola-xoom

Answer 1

Apl Web perlu mengenal pasti keadaan yang berbeza melalui URL Keadaan yang berbeza sepadan dengan URL yang berbeza, yang sesuai untuk bergerak ke hadapan dan ke belakang, dan untuk menyimpan penanda halaman.
Walau bagaimanapun, untuk memastikan pengalaman pengguna dalam Apl Web, peralihan status halaman biasanya tidak menyegarkan halaman, yang sering dicapai melalui ajax.
Ajax tradisional tidak akan menjejaskan bar alamat (permintaan diselesaikan melalui objek XHR, dan bukannya meminta URL baharu), jadi bagaimana jika anda mahu URL sepadan dengan keadaan halaman yang berbeza? Kaedah seperti windows.location akan menyegarkan keseluruhan halaman.
Ini memerlukan penggunaan # tradisional. Titik utama pada asalnya membenarkan anda untuk bergerak antara bahagian yang berbeza pada halaman semasa, menyokong ke hadapan dan ke belakang serta menyimpan penanda halaman, jadi ia digunakan dalam penghalaan Apl Web. Dengan cara ini, www.example.com/index.html#phones dan www.example.com/index.html#users boleh mewakili dua keadaan dan peralihan tidak akan memuatkan semula halaman.
API Sejarah baharu boleh mengalih keluar #, tetapi pelayan perlu menyediakan versi sandaran, jadi saya tidak akan menerangkan butiran di sini.

Answer 2

1. Mula-mula pelajari pengetahuan asas penghalaan hadapan, perkara paling asas seperti onHashChange dan pushState, malah tulis sendiri laluan berskala kecil sebelum menggunakannya!

2. Walaupun anda tidak belajar, sila baca dokumentasi rasmi dengan teliti dan lengkap, contoh rasmi adalah sangat jelas!

Answer 3

var router = new VueRouter({
    history: true, //html5模式 去掉锚点
    saveScrollPosition: true //记住页面的滚动位置 html5模式适用
})

Vue mengkonfigurasi mod penghalaan kepada mod html5 Ia disebut dalam dokumen rasmi tetapi ia tidak menyatakan cara menulisnya

Answer 4

Adalah disyorkan untuk menggunakan v-link="{path : '/phones'}" dalam html supaya anda tidak perlu risau tentang hash

Answer 5

Ini adalah cara bahagian hadapan melaksanakan penghalaan #Hujung belakang juga dipanggil cincang, yang sebenarnya serupa dengan titik utama yang anda fikirkan ialah laluan, yang memerlukan kerjasama bahagian belakang dan seumpamanya, ia adalah untuk pengalaman yang lebih baik Anda boleh pergi ke belakang dan ke hadapan.

Answer 6

Muat turun pautan sauh pada Baidu, kemudian baca dokumentasi angularjs dan vuejs, saudara