vue的導航連結元件是什麼

vue的導覽連結元件是「router-link」。 「」元件支援使用者在具有路由功能的應用程式中點擊導航，透過to屬性指定目標位址，語法為「...-link>”；預設渲染為帶有正確連接的“”標籤，可以透過配置tag屬性產生別的標籤。

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

vue的導航連結元件是「router-link」。

vue 元件router-link介紹

#元件支援使用者在具有路由功能的應用中點擊導航。透過to屬性指定目標位址，預設渲染為帶有正確連接的標籤，可以透過配置tag屬性產生別的標籤。另外，當目標路由成功啟動時，連結元素會自動設定一個表示啟動的css類別名稱

##router-link在哪裡？

• 這裡展示的主頁當中的router-link

• 所以它在App.vue 裡面（為什麼主頁寫在App裡，不是應該寫在index.html裡面嗎？no no no，這裡是將這個頁面獲得到的內容渲染到主頁）【相關推薦：

  vuejs入門教學、web前端】

• 在App.vue裡面你愛寫在哪裡就在哪

##router-link如何使用

你要建立好對應的元件
你要將你的元件寫好對應的路由位址
在App.vue頁面寫入對應（連結）

• ##寫路由並且導入元件的詳細過程上面的那篇文章裡面有，這裡只簡單介紹一下

1、你要創建好對應的元件

##2、你要將你的元件寫好對應的路由位址

3、在App.vue頁面寫入對應（連結）

結果展示：

它裡面的內容介紹

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

這裡面to 屬性指定要跳轉路由的path（位址列內的位址).

這個裡面的to 要和你指定的path一致，不區分大小寫

• 補充：a標籤不可以，因為它是重新打開一個標籤，他也能實現那個效果，只不過給人的感覺不像router-link 那麼友好

#擴展知識：router- link的屬性

元件的屬性有：to 、replace、append、  tag、  active-class、exact 、event、  exact- active-class

1、to（必選參數）：類型string/location

表示目標路由的鏈接，該值可以是一個字串，也可以是動態綁定的描述目標位置的物件如下幾種範例

//下面是字符串的形式
<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
    }
]
*/

#2、tag

類型: string預設值: "a"

如果想要 渲染成某種標籤，例如

。於是我們使用 tag prop 類別指定何種標籤，同樣它還是會監聽點擊，觸發導航。

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

如果此時我們想要在這個li標籤中新增a標籤,如下所示，可以不為a標籤添加href屬性即可哦

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

在這種情況下， 將作為真實的連結(它會得到正確的href 的)，而"激活時的CSS類名" 則設置到外層的

。

3、active-class

類型: string預設值: "router-link-active"

設定鏈接啟動時使用的CSS 類別名。預設值可以透過路由的建構選項 linkActiveClass 來全域配置。

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

預設值透過路由的建構選項linkActiveClass 來全域配置,如下範例：

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

4、exact-active-class

類型: string預設值: "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视频教程】

以上是vue的導航連結元件是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！