在Vue搭建子路由時，我們首先需要安裝Vue Router。安裝成功之后，我們需要在main.js文件中引入Vue Router，并在Vue實例上掛載router。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About },
{
path: '/user',
component: User,
children: [
{ path: '', component: UserHome },
{ path: 'profile', component: UserProfile },
{ path: 'dashboard', component: UserDashboard }
]
}
]
})
new Vue({
router,
render: h =>h(App)
}).$mount('#app')

在代碼中，我們通過children選項來設置子路由。用戶訪問/user路徑時，首先會渲染User組件的模板，然后根據子路由的path來切換子組件的模板。

在User組件的模板中，我們需要使用router-view來渲染子組件的模板。如果我們在子組件的模板中也需要使用router-view渲染子子組件的模板，那么我們可以通過在父子組件中添加額外的router-view來實現。

在代碼中，我們通過在router-view中添加name屬性來為其命名，并在父組件的模板中添加同名的router-view來渲染子子組件的模板。

我們也可以在路由配置中使用props屬性來將參數傳遞給組件。例如，在UserProfile組件中，我們可以通過props接收id參數。

const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About },
{
path: '/user',
component: User,
children: [
{ path: '', component: UserHome },
{
path: 'profile/:id',
component: UserProfile,
props: true
},
{ path: 'dashboard', component: UserDashboard }
]
}
]
})
export default {
name: 'UserProfile',
props: ['id']
}

在這種情況下，我們需要在路徑中使用參數來傳遞id。例如，/user/profile/123會將id參數的值設置為123，并將其傳遞給UserProfile組件。

在使用Vue Router時，我們經常需要使用programmatic導航來讓用戶從一個路徑跳轉到另一個路徑。Vue Router提供了兩種不同的導航方式：router.push和router.replace。router.push將新路徑添加到歷史記錄中，而router.replace將新路徑替換掉當前路徑。

this.$router.push('/user/profile/123')
this.$router.replace('/user/profile/123')

在代碼中，我們可以通過this.$router訪問到Vue Router的實例，從而使用push和replace方法進行導航。