경로와 구성 요소가 동일한 두 경로 - Vue js

경로와 구성 요소가 동일한 두 경로 - Vue js

다음과 같은 컴포넌트를 가진 경로가 2개 있습니다.

/:loc("-host")- /usa-host와 일치해야 합니다.

/:loc/:sublocation("-host")- /usa/washington-host와 일치해야 합니다.

vue.disc의 단일 이름 있는 루트를 사용하여 이를 실현하는 방법

경로의 별칭을 사용할 수 있습니다.

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

체크인 문서

const Home = { template: '<div>Home</div>' }
const Project = { 
	template: '<div>Project {{id}}</div>',
  mounted(){
  	console.log(this.$route);
  },
  data: function () {
    return {
    	id:this.$route.params.id||'',
    }
  }
}

const router = new VueRouter({
  mode: 'history',
  routes: [
  {
    path: '/',
    component: Home
  },
  {
    path: '/projects/:id?',
    component: Project,
    alias: '/project/:id'
  }
]
})

new Vue({
	router,
  el: '#app'
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
<router-link to="/">Home</router-link> |
<router-link to="/projects">projects</router-link> |
<router-link to="/project/1">project/1</router-link>
<router-view></router-view>
</div>

바이올린도 확인해 주세요.https://jsfiddle.net/nikleshraut/9sgk6yg4/1/

주의: 같은 컴포넌트를 열어도 기본적으로는 동작하지 않으므로 다른 방법을 사용해야 합니다.바이올린을 테스트하기 위해서만,home->/projects그리고.home->/project/1잘 되겠지만/projects->/project/1또는/project/1->/projects동작하지 않습니다.동작시키려면 , https://jsfiddle.net/nikleshraut/9sgk6yg4/ 와 같이 해 주세요.

이게 제 해결책입니다.

라우터:

사용하다?param을 리터럴에서 분리합니다.

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/:loc/:subloc?-host', component: Location },
    { path: '/:loc?-host', component: Location },
  ]
})

컴포넌트:

$route.params에서 로컬 변수를 설정합니다.

const Location = { 
  template: '<div>Location {{loc}} - {{ subloc }}</div>',
  data: function () {
    return {
      loc: this.$route.params.loc,
      subloc: this.$route.params.subloc,
    }
  },
}

템플릿:

사용하다:key="$route.fullPath"구성 요소가 각 내비게이션에 다시 장착되도록 합니다.

<div id="app">
  <router-link to="/">Home</router-link> |
  <router-link to="/usa-host" >loc1</router-link> |
  <router-link to="/usa/washington-host"  >loc2</router-link>
  <router-view :key="$route.fullPath"></router-view>
</div>

여기를 만지작거리다

언급URL : https://stackoverflow.com/questions/47160546/two-path-with-same-route-and-same-component-vue-js