在
Vue 中，可以通过 router 进行
页面的
跳转。具体步骤如下：
1. 安装
Vue Router：
```
npm install
vue-router
```
2. 在 main.js 中引入
Vue Router：
```
import
Vue from '
vue'
import
VueRouter from '
vue-router'
Vue.use(
VueRouter)
```
3. 创建路由实例并配置路由：
```
const router = new
VueRouter({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
})
```
其中，`routes` 是一个数组，每个元素表示一个路由规则，包括路径 `path`、名称 `name` 和组件 `component`。
4. 在组件中使用 `router-link` 组件进行
跳转：
```
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
```
`to` 属性
指定跳转的路径。
5. 在组件中使用 `$router.push()` 方法进行编程式
跳转：
```
this.$router.push('/')
```
其中，参数为要
跳转的路径。
完整代码示例：
```
// main.js
import
Vue from '
vue'
import
VueRouter from '
vue-router'
import App from './App.
vue'
import Home from './components/Home.
vue'
import About from './components/About.
vue'
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')
// App.
vue
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
// Home.
vue
<template>
<div>
<h1>Home</h1>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
// About.
vue
<template>
<div>
<h1>About</h1>
</div>
</template>
<script>
export default {
name: 'About'
}
</script>
```
最低0.47元/天 解锁文章
2937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
