Apakah komponen pautan navigasi vue?

Komponen pautan navigasi Vue ialah "pautan penghala". Komponen "" menyokong pengguna untuk mengklik untuk menavigasi dalam aplikasi dengan fungsi penghalaan dan menentukan alamat sasaran melalui atribut kepada "... -link>"; Secara lalai, ia dipaparkan sebagai teg "" dengan sambungan yang betul. Anda boleh menjana teg lain dengan mengkonfigurasi atribut teg.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Komponen pautan navigasi Vue ialah "pautan penghala".

Pengenalan pautan penghala komponen Vue

komponen menyokong pengguna untuk mengklik dalam aplikasi dengan navigasi fungsi penghalaan . Tentukan alamat sasaran melalui atribut kepada dipaparkan sebagai teg dengan sambungan yang betul secara lalai. Selain itu, apabila laluan sasaran berjaya diaktifkan , elemen pautan secara automatik menetapkan nama kelas css yang menunjukkan pengaktifan

Di manakah pautan penghala?

• Pautan penghala dalam halaman utama yang ditunjukkan di sini

• Jadi ia dalam App.vue (mengapa halaman utama ditulis dalam Dalam Apl, bukankah ia sepatutnya ditulis dalam index.html Tidak tidak tidak, berikut ialah cara untuk memaparkan kandungan yang diperolehi dari halaman ini ke halaman utama) [Cadangan berkaitan:

  tutorial pengenalan vuejs , bahagian hadapan web 】

• Tulis di mana sahaja yang anda suka dalam App.vue

Cara menggunakan pautan penghala

• Anda perlu mencipta komponen yang sepadan

• Anda perlu Menulis alamat penghalaan yang sepadan untuk komponen anda

• Tulis (pautan) yang sepadan pada halaman App.vue

Tulis penghalaan dan import komponen Proses terperinci adalah dalam artikel di atas Berikut adalah pengenalan ringkas

1 Anda perlu mencipta komponen yang sepadan

2. Anda perlu Menulis alamat penghalaan yang sepadan untuk komponen anda

3. Tulis (pautan) yang sepadan pada halaman App.vue

Paparan hasil:

Pengenalan kepada kandungan di dalamnya

Atribut kepada di sini menentukan laluan untuk melompat ke laluan (dalam alamat bar alamat).

<router-link to="/">Home</router-link>

Ke dalam ini mesti konsisten dengan laluan yang anda tentukan dan ia tidak peka huruf besar-kecil
Tambahan: teg tidak dibenarkan , kerana ia membuka semula tab, ia juga boleh mencapai kesan itu, tetapi ia tidak terasa mesra seperti pautan penghala

Pengetahuan lanjutan: Sifat-sifat pautan penghala tambah, teg, kelas aktif, tepat, acara, kelas aktif-tepat

1 kepada (parameter yang diperlukan): taip rentetan/lokasi

mewakili pautan. daripada laluan sasaran. Nilai boleh menjadi rentetan Ia juga boleh menjadi objek terikat secara dinamik yang menerangkan lokasi sasaran seperti berikut: contoh

2, tag

//下面是字符串的形式
<router-link to="home">Home</router-link>

//下面几种为动态绑定，v-bind: 可以简写为:


<router-link :to="&#39;index&#39;">Home</router-link>

/*但注意这个组件的导出需要有类似下面的代码
export default {
  name: &#39;App&#39;,
  data(){
    return {
      index:&#39;/&#39;
    }
  }
}
*/

<router-link :to="{ path: &#39;/home&#39; }">Home</router-link>
/*
这个路径就是路由中配置的路径
*/
<router-link :to="{ name: &#39;User&#39;}">User</router-link>
/*
  在路由的配置的时候，添加一个name属性，例如：
 routes: [
    {
      path:&#39;/home&#39;,
      name:&#39;User&#39;,
      component:home
    }
]
*/

taip: rentetanNilai lalai: "a"

Jika anda mahu diberikan kepada beberapa jenis teg, seperti < ;li>. Jadi kami menggunakan kelas prop tag untuk menentukan jenis teg, dan ia masih akan mendengar klik dan mencetuskan navigasi.

Jika kita ingin menambah tag pada tag li ini pada masa ini, seperti yang ditunjukkan di bawah, kita tidak boleh menambah atribut href pada tag

      <router-link :to="&#39;index&#39;"
                   tag="li"
                   event="mouseover">Home
      </router-link>

Di Sini kes ini, akan digunakan sebagai pautan sebenar (ia akan mendapat href yang betul), dan "nama kelas CSS pengaktifan" akan ditetapkan kepada

luar.

        <router-link :to="{name:&#39;Home&#39;}" tag="li">
        <a>Home</a>
        </router-link>

3. kelas aktif

Jenis: rentetanNilai lalai: "pautan-penghala-aktif"

Tetapkan pautan Nama kelas CSS untuk digunakan semasa mengaktifkan. Nilai lalai boleh dikonfigurasikan secara global melalui linkActiveClass pilihan pembinaan laluan.

Nilai lalai dikonfigurasikan secara global melalui pautan pilihan pembinaan laluanActiveClass, seperti yang ditunjukkan dalam contoh berikut:

<router-link :to="{path:&#39;/about&#39;}"
                   active-class="activeClass"                  
      >about</router-link>

4 >

export default new Router({
  mode:'history',
  linkActiveClass:'is-active',
  routes: [
    {
      path:'/about',
      component:about
    }
]
})

Jenis: rentetan

Nilai lalai: "router-link-exact-active"

配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的。

5、exact

类型: boolean

默认值: false

"是否激活" 默认类名的依据是 inclusive match (全包含匹配)。 举个例子，如果当前的路径是 /a 开头的，那么 也会被设置 CSS 类名。

按照这个规则，每个路由都会激活！想要链接使用 "exact 匹配模式"，则使用 exact 属性：

        <li><router-link to="/">全局匹配</router-link></li>
        <li><router-link to="/" exact>严格匹配</router-link></li>

简单点说，第一个的话，如果地址是/aa,或/aa/bb，……都会匹配成功，

但加上exact，只有当地址是/时被匹配，其他都不会匹配成功

6、event

类型: string | Array

默认值: 'click'

声明可以用来触发导航的事件。可以是一个字符串。

<router-link to="/document" event="mouseover">document</router-link>

如果我们不加event，那么默认情况下是当我们点击document的时候，跳转到相应的页面，但当我们加上event的时候，就可以改变触发导航的事件，比如鼠标移入事件

7、replace

类型: boolean

默认值: false

设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。

8、append

类型: boolean

默认值: false

设置 append 属性后，则在当前 (相对) 路径前添加基路径

【相关推荐：vuejs视频教程】

Atas ialah kandungan terperinci Apakah komponen pautan navigasi vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!