vue-cli에서 라우팅을 사용하는 방법

이 글은 주로 vue-cli에서 라우팅을 사용하는 방법을 소개하며, vue-cli에서 라우팅을 올바르게 사용하는 데 도움이 되기를 바랍니다.

1. 우선 npm에 vue-router가 있는지

보통 vue-cli를 설치하면 종속성 패키지가 다운로드됩니다

2. vue를 사용할 때 일반적으로 이러한 파일이 포함됩니다

deco/src/router/index.js

import Vue from 'vue'

import Router from 'vue-router'

import Hello from '../components/Hello'//首页

import Test from '../components/test'//需要跳转的页面 给组件重新命名

 

Vue.use(Router)

 

export default new Router({

 routes: [

  {//首页

   path: '/',

   name: 'Hello',

   component: Hello

  },

  {//需要跳转的页面

    path:'/test',

    name:'test',

    component:Test//组件名字

  }

 ]

})

demo/src/app.vue

<template>

 <p id="app">

  <img src="./assets/logo.png">

  <p>

  <router-link to="/home">home</router-link>//跳转首页

  <router-link to="/test">test</router-link>//跳转新页面

  </p>

  <router-view></router-view>//页面渲染放置的部分

 </p>

 

</template>

 

<script>

export default {

 name: &#39;app&#39;

}

</script>

 

<style>

#app {

 font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;

 -webkit-font-smoothing: antialiased;

 -moz-osx-font-smoothing: grayscale;

 text-align: center;

 color: #2c3e50;

 margin-top: 60px;

}

</style>

demo/src/main.js

import Vue from 'vue'

import App from './App'

import router from './router'

 

Vue.config.productionTip = false

 

/* eslint-disable no-new */

new Vue({

 el: '#app',

 router,

 template: &#39;<App/>&#39;,

 components: { App }

}).$mount(&#39;#app&#39;)//实例挂载到元素中

두 페이지의 구성 요소

이 경우 기본 라우팅 설정은 다음과 같습니다. 좋아, 일반적인 npm run dev에 따라 이 프로젝트를 실행할 수 있습니다

또한 여러 개의 중첩된 사용자 정의 경로가 있습니다

특정 라우팅 내용은 https://router.vuejs.org/zh-cn/installation에서 볼 수 있습니다. .html

관련 권장 사항:

라우팅을 사용하여 Angular 모듈 인스턴스 로드를 지연시키는 방법에 대한 자세한 설명

라우팅 및 $location을 사용하여 angle_AngularJS에서 뷰 전환

라우팅 기능의 Vue-Router2 구현 설명

위 내용은 vue-cli에서 라우팅을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!