前言
vue中的route實現了從一個頁面跳轉到另一個頁面的功能
基本路由跳轉
router.js
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/home.vue'
import Detail from '../views/detail'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/detail',
name: 'Detail',
component: Detail
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
router-link 跳轉路由
- 實現首頁跳轉詳情頁
route-link相當於a標簽跳轉，其指定route-view顯示的內容App.vue
<template>
<div>
<!-- route-view 顯示一個route所對應的頁面 -->
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
home.vue
<template>
<div>首頁</div>
<router-link to="/detail">Detail</router-link>
</template>
<script>
export default {
name: 'home'
}
</script>
detail.vue
<template>
<div>詳情</div>
</template>
<script>
export default {
name: 'detail'
}
</script>
router.push(path) 跳轉路由
- 通過路由的
path屬性實現首頁跳轉詳情頁
App.vue
<template>
<div>
<router-view @route-change="onRouteChange"/>
</div>
</template>
<script>
import router from '@/router'
export default {
name: 'App',
methods: {
/**
* 自定義事件監聽
* @param event
*/
onRouteChange (event) {
console.log(event)
router.push('/detail')
}
}
}
</script>
home.vue
<template>
<div>首頁</div>
<img @click="toDetail" src="@/assets/logo.png" style="width: 100%;"/>
</template>
<script>
export default {
name: 'home',
// 定義拋出的事件名稱
emits: ['route-change'],
methods: {
toDetail (event) {
// 自定義事件拋出
this.$emit('route-change', event)
}
}
}
</script>
router.push(name) 跳轉路由
- 通過路由的
name屬性實現首頁跳轉詳情頁
App.vue
<template>
<div>
<router-view @route-change="onRouteChange"/>
</div>
</template>
<script>
import router from '@/router'
export default {
name: 'App',
methods: {
/**
* 自定義事件監聽
* @param event
*/
onRouteChange (event) {
router.push({
name: event.name
})
}
}
}
</script>
home.vue
<template>
<div>首頁</div>
<img @click="toDetail" src="@/assets/logo.png" style="width: 100%;"/>
</template>
<script>
export default {
name: 'home',
// 定義拋出的事件名稱
emits: ['route-change'],
methods: {
toDetail (event) {
// 自定義事件拋出
this.$emit('route-change', { name: 'Detail' })
}
}
}
</script>
嵌套路由跳轉
- 實現詳情頁跳轉詳情子頁面
route.js
{
path: '/detail',
name: 'Detail',
component: Detail,
children: [
{
path: '',
name: 'DetailHome',
component: DetailHome
},
{
path: 'sub',
name: 'SubDetail',
component: SubDetail
}
]
}
detail.vue
<template>
<router-view @to-sub-detail="toSubDetail"/>
</template>
<script>
import router from '@/router'
export default {
name: 'detail',
methods: {
/**
* 自定義事件監聽
*/
toSubDetail () {
router.push('/detail/sub')
}
}
}
</script>
detail-home.vue
<template>
<div>詳情頁</div>
<button @click="toSubDetail">跳轉子頁面</button>
<router-view/>
</template>
<script>
export default {
name: 'DetailHome',
methods: {
toSubDetail () {
// 自定義事件拋出
this.$emit('to-sub-detail')
}
}
}
</script>
sub-detail.vue
<template>
<div>詳情子頁面</div>
</template>
<script>
export default {
name: 'SubDetail'
}
</script>
