很多時候，在交互設計中，都需要用到多級菜單定位，而Vue.js提供了很好的支持，使得菜單欄的設計變得更加容易。我們可以使用vue-router來實現多級菜單的定位，而vue-router的實現方式又主要有兩種：動態路由和嵌套路由。

動態路由是指根據傳遞的參數，動態生成路由。在vue-router中，我們可以通過params傳遞參數，這樣就可以實現多層級的菜單欄。當然，為了能夠正常渲染頁面，我們需要在vue組件中使用$route.params訪問傳遞的參數。

export default {
data() {
return {
currentMenu: this.$route.params.menu, // 獲取當前menu參數的值
currentSubMenu: this.$route.params.subMenu // 獲取當前subMenu參數的值
}
}
}

嵌套路由則是指將路由嵌套在另一個路由之下，從而實現多級菜單。在vue-router中，我們可以像下面這樣定義嵌套路由：

const router = new VueRouter({
routes: [
{
path: '/home',
component: Home,
children: [
{
path: 'menu1',
component: Menu1,
children: [
{
path: 'subMenu1',
component: SubMenu1
},
{
path: 'subMenu2',
component: SubMenu2
}
]
},
{
path: 'menu2',
component: Menu2,
children: [
{
path: 'subMenu1',
component: SubMenu1
},
{
path: 'subMenu2',
component: SubMenu2
}
]
}
]
}
]
});

可以看到，我們首先定義了根路由/home，然后在/home下定義了兩個子路由menu1和menu2。在menu1和menu2下，又分別定義了兩個子路由subMenu1和subMenu2。這樣就可以實現多級菜單的定位了。

同時，我們在代碼中還可以通過Watch監聽$route變化，實時獲取當前路由信息，從而根據需要進行相應操作。代碼如下：

watch: {
'$route': function(to, from) {
console.log(to.path); // 當前路徑信息
console.log(to.matched[0].path); // 匹配路徑的第一個值，即父級路由
console.log(to.matched[1].path); // 匹配路徑的第二個值，即當前路由
}
}

通過以上的方法，我們可以很容易地定位多級菜單，從而提升了用戶界面的友好度和易用性，同時也提高了我們的開發效率。