欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用Vue-router二級路由跳轉(zhuǎn)另一條路由下的子級

 更新時間：2022年10月25日 14:19:39   作者：Whitess007  
這篇文章主要介紹了使用Vue-router二級路由跳轉(zhuǎn)另一條路由下的子級問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue-router二級路由跳轉(zhuǎn)另一條路由下的子級

實驗項目中，在一個 /list/user 列表中，當點擊某一條時，需要跳轉(zhuǎn)到 /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 組件中，采用編程式導航的方式跳轉(zhuǎn)，寫法如下：

this.$router.push({name:detail-user, path:`/ue/matter/detail/user/${userid}/user}`)；

或者如下

this.$router.push({name: detail-user});

結(jié)果

組件內(nèi)容確實更換了，但瀏覽器上的地址欄錯了

實驗

看官方文檔說，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>
    	&nbsp;&nbsp;
		<router-link :to="{ path: 'foo', name: foo}">path + name </router-link>
		&nbsp;&nbsp;
		<router-link :to="{ path: 'bar', query: {plan:'private'} }">path + query /bar?plan="private"</router-link>
		&nbsp;&nbsp;
    	<router-link :to="{ name: 'user', params: {userId:123} }">name + params /user/123</router-link>
    	&nbsp;&nbsp;
        <router-link :to="{ name: 'many', query: {plan:'private'} }">name + query </router-link>
        &nbsp;&nbsp;
        <router-link :to="{ params: { userId: 123 }, query: {plan: 'private'} }">params + query </router-link>
        &nbsp;&nbsp;
        <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()">點擊跳轉(zhuǎn)到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>

結(jié)論：

結(jié)果是：除了path+params之外，params+query也不可以，因為沒有告知路徑信息

那對于上面涉及二級跳轉(zhuǎn)，那寫name + path的方式，我理解的是path需要拼接，所以給了name就會找不到路徑。我之后的修改是，只傳給push一個字符串路徑。

this.$router.push(`/ue/matter/detail/user/${userid}/user`)

vue二級路由跳轉(zhuǎn)一級路由激活處理

有時候有的頁面是一個頁面的子頁面，這時候點擊打開跳轉(zhuǎn)到二級頁面，這個時候

一級導航的路由可能激活狀態(tài)不對應

本人是這么處理的

<el-menu :default-active="$route.path.match('(/[a-z]+[^/]){1}')[0]"

這樣就可以匹配目標頁面的路由匹配頭部就聚焦 

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論