vue router跳转页面的使用
时间: 2023-12-03 18:40:07 浏览: 97
以下是Vue.js中使用vue-router进行页面跳转的方法:
1.首先需要在项目中安装vue-router,可以使用npm命令进行安装:
```shell
npm install vue-router --save
```
2.在Vue项目中引入vue-router,并创建路由对象:
```javascript
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
}
]
})
```
3.在Vue组件中使用`<router-link>`标签进行页面跳转:
```html
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
```
4.在Vue组件中使用`<router-view>`标签进行路由视图的渲染:
```html
<router-view></router-view>
```
5.在Vue实例中挂载路由对象:
```javascript
new Vue({
router,
render: h => h(App)
}).$mount('#app')
```
以上就是使用vue-router进行页面跳转的基本方法。
阅读全文