私はこのように同じコンポーネントを持つ2つのパスを持っている:二パス - VueのJS
/:loc("-host")
- 一致する必要があります/ USA-ホスト
/:loc/:sublocation("-host")
- /アメリカ/ワシントン・ホストと一致する必要がありますあなたは、パスのエイリアスを使用することができます
私はこのように同じコンポーネントを持つ2つのパスを持っている:二パス - VueのJS
/:loc("-host")
- 一致する必要があります/ USA-ホスト
/:loc/:sublocation("-host")
- /アメリカ/ワシントン・ホストと一致する必要がありますあなたは、パスのエイリアスを使用することができます
vue.jsで、この使用して単一の名前付きルートを達成するためにどのように
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
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/
これは私のソリューションです。
ルータ:
使用?
ルートでリテラルとは別の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>
あなたは、あなたが行うことができます '/ – samayo
vuerouterで正規表現を使用することができます:LOC /:?サブロケーションを'そして 'sublocation'は – Nora
オプションになりますが、[ドキュメント](HTTPSを確認することができます。 //vithub.com/pillarjs/path-to-regexp#parameter-modifiers)の 'vue-router'によって使用される' path-to-regexp' – Nora