vue.js의 라우터 구성 방법 소개

이 글은 vue.js의 라우터 구성 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

vue 프로젝트에 라우팅 모듈을 설치하세요

npm install vue-router --save-dev

라우팅을 구성하기 전에 먼저 및 same 이 기능은 주소가 포함된

<router-link to="/body">点我跳转页面</router-link>

to로 이동하는 데 사용됩니다. 경로를 구성할 때 "/body"가 정의되므로 지금은 무시하세요. router-link> H5

<div>
   <router-view></router-view>
</div>

라우터 구성

main.js 파일에 라우터 모듈을 소개하고 구성하세요

//main.js

//引进路由器模块
import VueRouter from 'vue-router'

//引进跳转的 组件页面地址
import App_head from './App_head'
import body_z from './components/HelloWorld'

Vue.config.productionTip = false;
Vue.use(VueRouter);

//配置路由器
const router = new VueRouter({
  routes:[
    //path为 "/" 意思是：<router-view> 标签初始显示的地址
    //component为上面 组件名
    {path:"/",component:App_head},              
    {path:"/body",component:body_z}
  ],
  mode:"history"                 //定义这个后，打开网页，8080后面不会跟着 /#/ 的符号
});

new Vue({
  router,                              //记得在这里定义路由器，否则不能使用
  el: &#39;#app_body&#39;,
  components: { App_body },
  template: &#39;<App_body/>&#39;
})

라우터가 정의된 후 및 태그와 함께 사용

<div>
   //点击后，跳转到http://localhost:8080/body  
   //点击后，<router-view>将显示 HelloWorld 组件的内容
   <router-link to="/body">跳转页面</router-link>       
   <router-view></router-view>
</div>

관련 권장 사항:

Vue.js 중첩 라우팅(하위 라우팅)

Vue .js 라우팅 이름 지정 및 이름 지정 보기

위 내용은 vue.js의 라우터 구성 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!