這次帶給大家使用vue router操作動態路由下讓每個子路由都是獨立元件，使用vue router操作動態路由下讓每個子路由都是獨立元件的注意事項有哪些，下面就是實戰案例，一起來看看。
vue-router 之動態路由
vue-router官网上面是这样说的
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
然后，我就这样写了：
this.$router.push({path:'manage', query: {id: 'tasklist'}})1
结果很明显，失败了。然后我就默默的再次看了一下官网，结果发现了这句话
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', params: { plan: 'private' }})
注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：
const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
谨记啊，动态实现二级路由，需要先用变量保存二级路由名称(let router = 'tasklist')，然后调用this.$router.push({path: `/user/${router}`}).下面看下vue router動態路由下讓每個子路由都是獨立元件的解決方案
#因為vue-router 對嵌套路由採用的是元件重複使用策略，這在大部分場景的確是高效的做法，但是如果遇到這種情況：
#就是要求多個子路由共活，並且有頻繁來回切換需求的話，就很希望能讓每個子路由都是獨立組件了，雖然可以透過監聽路由切換
watch: {
'$route'(to) {
if (to.meta.path === '/page/buy-details') {
this.id = to.params.id;
this.state()
}
}
},去即時處理更新的數據，我之前一直都是這麼做的，包括上面那副動圖的頁面，但是這真的很麻煩，要讓用戶切換中準確的回到切換前頁面的顯示狀態，要考慮的東西太多，所以想出了一個解決方案：
子路由元件不涉及實際業務代碼，只維護一個打開過的id列表，當路由切換到這邊時，判斷id，沒打開過的添加，透過這個列表循環出實際的子路由組件，v-show當前id的，這樣就能實現每個實例都是獨立的了
我按這個思路寫出一個mixins
details -page.js
export default {
watch: {
'$route'(to, from) {
this.detailsLeave(from);
this.detailsOpen(to);
}
},
data() {
return {
pagePath: '',
pageId: 0,
pages: {}
}
},
methods: {
/**
* 子页面打开触发
* @param route
*/
detailsOpen(route) {
if (this.detailsPathGet(route.path) === this.pagePath) {
if (!this.pages[route.params.id]) {
this.$set(this.pages, route.params.id, {
id: route.params.id,
scrollTop: 0
})
}
//路由打开 跳转滚动条
this.pageId = route.params.id;
this.$nextTick(()=>{
this.$parent.$el.firstChild.scrollTop = this.pages[route.params.id].scrollTop;
});
}
},
/**
* 路由切换触发
* 判断离开的路由是否是当前页面，如果是则记录滚动条高度
* @param route
*/
detailsLeave(route) {
if (this.detailsPathGet(route.path) === this.pagePath) {
if (this.pages[route.params.id]) {
//记录滚动条高度 此处针对ea-admin后台 不同的框架要记录的滚动条el不同
this.pages[route.params.id].scrollTop = this.$parent.$el.firstChild.scrollTop ;
}
}
},
/**
* 子页面关闭函数
* @param id
*/
detailsClose(id) {
delete this.pages[id]
},
/**
* 取路由不含最后一项参数的地址
* @param path
* @returns {string}
*/
detailsPathGet(path) {
const i = path.lastIndexOf('/');
return path.substr(0, i);
}
},
mounted() {
//通过当前路由地址创建页面识别地址 注：只对path: '/user/:id' 有效 当 path: /user/:id/profile 失效
this.pagePath = this.detailsPathGet(this.$route.path);
//执行第一次子页面打开
this.detailsOpen(this.$route);
//监听标签关闭消息 此处针对ea-admin后台 不同框架监听关闭方式不同
this.$tabs.onRemove((page, next) => {
//收到标签关闭回调，判断关闭的是否是当前页面
if (page._path === this.pagePath) {
//触发子页面删除
this.detailsClose(page.id)
}
next()
})
}
}Details.vue
<template>
<p>
<your-component
v-for="item in pages"
:id="item.id"
:key="item.id"
v-show="item.id === pageId">
</your-component>
</p>
</template>
<script>
import YourComponent from '';
import detailsPage from '../mixins/details-page'
export default {
name: 'DetailsPage',
components: {YourComponent},
mixins: [detailsPage],
}
</script>這樣子元件可以只專注處理自己的固定數據，因為元件唯一，不用再去煩惱為每個id儲存視圖狀態了。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
如何處理父元件中vuex方法更新state子元件不能及時更新渲染
以上是使用vue router操作動態路由下讓每個子路由都是獨立元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
