Vue.js 라우터 사용 방법 요약(코드 포함)-JS 튜토리얼-php.cn

Vue.js 라우터 사용 방법 요약(코드 포함)

不言

풀어 주다： 2018-08-23 16:21:13

원래의

1665명이 탐색했습니다.

이 글은 Vue.js 라우터 사용 방법(코드 포함)을 요약한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

는 새로 고침이 필요 없는 라우터용 점프입니다.

기본적으로 라벨을 표시하도록 라벨을 변경하세요.

<router-link to="/" class="nav-link">主页</router-link>

로그인 후 복사

은 tag 속성을 통해 변경할 수 있습니다. 예:

<router-link to="/" tag="p" class="nav-link">主页</router-link>

로그인 후 복사

속성 앞에 콜론을 추가하세요. of 그런 다음 변수를 연결하세요

아래 코드에서 볼 수 있듯이 to의 값은 homelink에 따라 변경될 수 있습니다. 즉, 우리가 설정한 로직을 통해 homelink의 값에 영향을 줄 수 있습니다. <라우터-링크> 점프 방향 변경

<router-link :to="homelink" tag="p" class="nav-link">主页</router-link>



 export default {
      data(){
        return{
          homelink:&#39;/&#39;
        }
      },
        name: "Header"
    }

로그인 후 복사

입력 주소 입력 오류 처리

사용자가 잘못된 URL 주소를 입력하면 자동으로 설정된 주소로 점프

추가

{path:&#39;*&#39;,redirect:&#39;/&#39;}

로그인 후 복사

const router= new VueRouter({
  routes:[
    {path:'/',component:Home},
    {path:'/menu',component:Menu},
    {path:'/admin',component:Admin},
    {path:'/about',component:About},
    {path:'/login',component:Login},
    {path:'/register',component:Register},
    {path:&#39;*&#39;,redirect:&#39;/&#39;}                  //错误跳转处理  ，将跳转到 Home 组件
  ],
  mode:"history"
});

로그인 후 복사

입력이 라우터 구성에 존재하지 않습니다. main.js 파일 아래 항목 주소, 페이지는 홈 구성 요소로 이동합니다

경로 이름 속성

경로를 구성할 때

//main.js
const router= new VueRouter({
  routes:[
    {path:'/',name:'home',component:Home},        name属性为 home
    {path:'/menu',name:'menu',component:Menu},
    {path:'/admin',name:'admin',component:Admin},
    {path:'/about',name:'about',component:About},
    {path:'/login',name:'login',component:Login},
    {path:'/register',name:'register',component:Register},
    {path:&#39;*&#39;,redirect:&#39;/&#39;}
  ],
  mode:"history"
});

로그인 후 복사

name 속성을 사용하여 라우팅 주소를 지정합니다(추가: to 앞에 추가하세요)

        <ul class="navbar-nav">
          <li><router-link :to="{name:&#39;home&#39;}" class="nav-link">主页</router-link></li>
          <li><router-link :to="{name:&#39;menu&#39;}" class="nav-link">菜单</router-link></li>
          <li><router-link to="admin" class="nav-link">管理</router-link></li>
          <li><router-link to="about" class="nav-link">关于我们</router-link></li>
        </ul>

로그인 후 복사

Route Jump method

//html
<button @click="goToMenu" class="btn btn-success">Let`s order</button>

//js
 export default {
        name: "Home",
        methods:{
          goToMenu(){
            //跳转到上一次浏览的页面
            this.$router.go(-1);

            //指定跳转的地址
            this.$router.replace(&#39;/menu&#39;)

            //指定跳转路由的名字下（路由name值）
            this.$router.replace({name:&#39;menu&#39;});

            //通过 push 进行跳转(最常用)
            this.$router.push(&#39;/menu&#39;);
            this.$router.push({name:&#39;menu&#39;});
          }
        }
    }

로그인 후 복사