Vue의 탐색 링크 구성 요소는 무엇입니까?

vue의 탐색 링크 구성 요소는 "라우터 링크"입니다. "" 구성 요소는 사용자가 라우팅 기능을 사용하여 애플리케이션을 탐색하고 to 속성을 통해 대상 주소를 지정할 수 있도록 지원합니다. 구문은 "...입니다. -link>"; 기본적으로 올바른 연결이 있는 "" 태그로 렌더링됩니다. 태그 속성을 구성하여 다른 태그를 생성할 수 있습니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

vue의 탐색 링크 구성 요소는 "라우터 링크"입니다.

vue 구성 요소 라우터 링크 소개

구성 요소는 사용자가 라우팅 기능을 사용하여 애플리케이션을 클릭하여 탐색할 수 있도록 지원합니다. to 속성을 통해 대상 주소를 지정하면 는 기본적으로 올바른 연결을 사용하여 태그로 렌더링되며 태그 속성을 구성하여 다른 태그를 생성할 수 있습니다. 또한 대상 경로가 성공적으로 활성화되면 링크 요소 가 자동으로 활성화를 나타내는 CSS 클래스 이름을 설정합니다

router-link는 어디에 있나요?

• 여기 표시된 메인 페이지의 라우터 링크

• 그래서 App.vue에 있습니다. (메인 페이지는 왜 App으로 작성하나요? index.html로 작성하면 안되나요? no no no , 여기 이 페이지에서 얻은 콘텐츠를 메인 페이지로 렌더링하는 것입니다) [관련 권장 사항: vuejs 입문 튜토리얼, web front-end]

• App.vue에서 원하는 곳에 작성할 수 있습니다.

router-link 사용방법

• 해당 컴포넌트를 생성해야 합니다

• 해당 컴포넌트의 라우팅 주소를 작성해야 합니다

• 쓰기 해당 App.vue 페이지에서 (링크)

라우트 작성 및 컴포넌트 가져오기에 대한 자세한 과정은 위 글에 간략하게 소개되어 있습니다

1 해당 컴포넌트를 생성해야 합니다

2 .구성 요소에 해당하는 라우팅 주소를 작성해야 합니다.

3. App.vue 페이지에 해당(링크)를 작성합니다.

결과 표시:

컨텐츠 소개 그 안에

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

여기에 to가 있습니다. 이 속성은 경로로 이동할 경로(주소 표시줄의 주소)를 지정합니다.

• 여기에 있는 to는 지정한 경로와 일치해야 하며 대/소문자가 아닙니다. sensitive

• 추가: a 태그는 허용되지 않습니다. 탭을 다시 열면 해당 효과를 얻을 수도 있지만 router-link

확장된 지식: router-link의 Properties

구성요소 속성은 다음과 같습니다:

to, replacement,append, tag, active-class, 정확한, event, 정확한-active-class

1, to(필수 매개변수): 유형 문자열/위치

는 대상 경로 링크를 나타냅니다. 값은 문자열이거나 대상 위치를 설명하는 동적으로 바인딩된 객체일 수 있습니다

다음 예

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

유형: 문자열

기본값 : "a"

를

와 같은 일종의 레이블로 렌더링하려는 경우. 따라서 태그 소품 클래스를 사용하여 어떤 종류의 태그를 지정하면 여전히 클릭을 수신하고 탐색을 트리거합니다.

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

이번에 이 li 태그에 태그를 추가하려면 아래와 같이 a 태그에 href 속성을 추가할 수 없습니다.

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

이 경우 (올바른 href를 얻게 됩니다.) "활성화 CSS 클래스 이름"은 외부

로 설정됩니다.

3.active-class

유형: 문자열

기본값: "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

Type: string

기본값: "router-link- 완전활성"

配置当链接被精确匹配的时候应该激活的 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!