二パス - VueのJS

Question

私はこのように同じコンポーネントを持つ2つのパスを持っている：

/:loc("-host") - 一致する必要があります/ USA-ホスト

/:loc/:sublocation("-host") - /アメリカ/ワシントン・ホストと一致する必要がありますあなたは、パスのエイリアスを使用することができます

Answer 1

vue.jsで、この使用して単一の名前付きルートを達成するためにどのように

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

doc

const Home = { template: '<div>Home</div>' } 
 
const Project = { 
 
\t template: '<div>Project {{id}}</div>', 
 
    mounted(){ 
 
    \t console.log(this.$route); 
 
    }, 
 
    data: function() { 
 
    return { 
 
    \t 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({ 
 
\t 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/

Answer 2

これは私のソリューションです。

ルータ：

使用?ルートでリテラルとは別の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> 

Fiddle here