vue项目中,点to击实现路由跳转,
时间: 2023-08-04 21:06:12 浏览: 37
在 Vue 项目中,可以使用 `vue-router` 来实现路由跳转。
首先需要在项目中安装 `vue-router`:
```
npm install vue-router
```
然后在 `main.js` 中引入和使用:
```
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
```
这里定义了两个路由 `/` 和 `/about`,分别对应 `Home` 组件和 `About` 组件。然后在模板中使用 `<router-link>` 标签来实现路由跳转:
```
<template>
<div>
<h1>My App</h1>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>
```
这里的 `<router-link>` 标签会渲染成一个可以点击的链接,点击后会跳转到指定的路由。而 `<router-view>` 标签则用于渲染路由对应的组件。