使用Vue-router二級路由跳轉另一條路由下的子級
更新時間：2022年10月25日 14:19:39 作者：Whitess007
這篇文章主要介紹了使用Vue-router二級路由跳轉另一條路由下的子級問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue-router二級路由跳轉另一條路由下的子級
實驗項目中，在一個 /list/user 列表中，當點擊某一條時，需要跳轉到 /detail/userId/user 詳情下，展示詳情信息。
router.js
const routes = [
{
path: '/ue/matter/list',
name: 'list',
component: List,
children: [
{ path: 'user', name: 'list-user', component: ListUser },
],
props: true
},
{
path: '/ue/matter/detail/:userId',
name: 'detail',
component: Detail,
children: [
{ path: 'user', name: 'detail-user', component: DetailUser },
],
props: true
}
]ListUser 組件中，采用編程式導航的方式跳轉，寫法如下：
this.$router.push({name:detail-user, path:`/ue/matter/detail/user/${userid}/user}`)；或者如下
this.$router.push({name: detail-user});結果
組件內容確實更換了，但瀏覽器上的地址欄錯了
實驗
看官方文檔說，path+params地方式會被忽略，所以將router.push中用到的鍵path、params、name、query分別組合做了一個頁面，來測試哪種會不可以。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>router-linkto</title>
<link rel="stylesheet" href="">
</head>
<body>
<div id="app">
<router-link :to="{ path: 'home' }">path單獨 </router-link>
<router-link :to="{ path: 'foo', name: foo}">path + name </router-link>
<router-link :to="{ path: 'bar', query: {plan:'private'} }">path + query /bar?plan="private"</router-link>
<router-link :to="{ name: 'user', params: {userId:123} }">name + params /user/123</router-link>
<router-link :to="{ name: 'many', query: {plan:'private'} }">name + query </router-link>
<router-link :to="{ params: { userId: 123 }, query: {plan: 'private'} }">params + query </router-link>
<br/>
<br/>
<router-view></router-view>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
const Home = {
template: '<div>Home path單獨 <span v-on:click="change()">點擊跳轉到path+name</span> </div>',
methods: {
change: function() {
this.$router.push({name: "foo", path: "/foo"})
}
}
}
const Foo = { template: "<div>Foo path+name</div>"}
const Bar = { template: "<div>Bar path+query</div>"}
const User = { template: "<div>User {{$route.params.userId}}</div>" }
const Many = { template: "<div>Many name+params</div>" }
const Too = { template: "<div>Too params + query</div>" }
const router = new VueRouter({
routes: [
{
path: "/home",
component: Home
},
{
name: "foo",
path: "/foo",
component: Foo
},
{
path: "/bar",
component: Bar
},
{
name: "user",
path: "/user/:userId",
component: User
},
{
path: "/many",
name: "many",
component: Many
},
{
path: "/too/:userId",
component: Too
}
]
})
new Vue({
el: '#app',
router
})
</script>
</html>
結論：
結果是：除了path+params之外，params+query也不可以，因為沒有告知路徑信息
那對于上面涉及二級跳轉，那寫name + path的方式，我理解的是path需要拼接，所以給了name就會找不到路徑。我之后的修改是，只傳給push一個字符串路徑。
this.$router.push(`/ue/matter/detail/user/${userid}/user`)vue二級路由跳轉一級路由激活處理
有時候有的頁面是一個頁面的子頁面，這時候點擊打開跳轉到二級頁面，這個時候
一級導航的路由可能激活狀態(tài)不對應
本人是這么處理的
<el-menu :default-active="$route.path.match('(/[a-z]+[^/]){1}')[0]"這樣就可以匹配目標頁面的路由匹配頭部就聚焦
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue3是一個流行的前端框架,vite是一個快速的構建工具,下面這篇文章主要給大家介紹了關于vue3+vite項目跨域配置踩坑實戰(zhàn)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Vue中使用Datav如何完成大屏基本布局問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
vue 實現(xiàn) ios 原生picker 效果及實現(xiàn)思路解析
這篇文章主要介紹了vue 實現(xiàn) ios 原生picker 效果及實現(xiàn)思路解析,本文給大家介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2017-12-12
這篇文章主要介紹了vue的滾動條插件實現(xiàn)代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
本篇文章主要介紹了Vue實現(xiàn)自帶的過濾器，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
本篇文章主要介紹了Vue+Element使用富文本編輯器的示例代碼，具有一定的參考價值，有興趣的可以了解一下2017-08-08
本篇文章主要介紹了vue實現(xiàn)增刪改查效果的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了vue自動路由-單頁面項目（非build時構建）,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
詳解關于表格合并span-method方法的補充(表格數(shù)據(jù)由后臺動態(tài)返回)
這篇文章主要介紹了詳解關于表格合并span-method方法的補充(表格數(shù)據(jù)由后臺動態(tài)返回) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
本篇文章主要介紹了vue 運用mock數(shù)據(jù)的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11