vue.js - 具有相同路线和相同组件的两条路径 - Vue js

Question

我有两条具有相同组件的路径，如下所示:
/:loc("-host") - 应该匹配/usa-host
/:loc/:sublocation("-host") - 应该匹配/usa/washington-host

如何在 vue.js 中使用单个命名路由来实现这一点

Answer 1

您可以使用路径别名

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

入住 doc

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>

还要检查 fiddle : https://jsfiddle.net/nikleshraut/9sgk6yg4/1/

注意:默认情况下无法打开相同的组件，您需要使用其他技巧。为了测试上面的 fiddle ，去 home -> /projects 和 home -> /project/1 会工作，但 /projects -> /project/1 或 /project/1 -> /projects 不会工作。要使其工作，请执行以下操作: https://jsfiddle.net/nikleshraut/9sgk6yg4/