vue3+js实现面包屑和路由跳转
时间: 2023-08-20 12:02:12 浏览: 64
Vue3中实现面包屑和路由跳转需要使用Vue Router和Vue Composition API。首先,我们需要在项目中安装Vue Router和创建路由配置。
1.安装Vue Router:
我们可以使用npm或者yarn来安装Vue Router
```
npm install vue-router
```
2.创建路由配置:
在main.js中导入Vue Router,并创建路由实例,配置路由表和对应的组件。
```javascript
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/contact', component: Contact }
]
const router = createRouter({
history: createWebHistory(),
routes
})
createApp(App).use(router).mount('#app')
```
3.实现面包屑导航:
在App.vue中,我们可以使用`$route`属性来获取当前路由信息,并使用`v-for`指令循环渲染面包屑导航。
```vue
<template>
<div>
<ul>
<li v-for="crumb in crumbs" :key="crumb.path">
<router-link :to="crumb.path">{{ crumb.name }}</router-link>
</li>
</ul>
<!-- 其他内容 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
computed: {
crumbs() {
const matched = this.$route.matched
return matched.map(route => ({
name: route.name,
path: route.path
}))
}
}
}
</script>
```
在上面的代码中,我们使用`$route.matched`来获取与当前路径匹配的路由记录数组并遍历生成面包屑导航。每个导航都使用`router-link`组件渲染,并根据对应的路由记录设置路径和名称。
4.实现路由跳转:
要实现路由跳转,我们可以在模板中使用`router-link`组件,或者在JavaScript中使用Vue Router提供的编程式导航方法。
```vue
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/contact">Contact</router-link>
<!-- 其他内容 -->
<router-view></router-view>
</div>
</template>
```
或者在JavaScript中使用编程式导航:
```javascript
// 在Vue组件中
this.$router.push('/about') // 跳转到/about
// 在普通JavaScript中
router.push('/about') // 跳转到/about
```
以上就是使用Vue3和Vue Router实现面包屑导航和路由跳转的基本步骤。通过配置路由表和使用Vue Router提供的组件和API,我们可以轻松地实现面包屑导航和路由跳转功能。