vue点击按钮实现页面跳转

飞熊 • 2023年12月19日下午9:23 • 后端漫谈 • 阅读 290

vue点击按钮实现页面跳转

1.安装vue-router：

npm install vue-router

2.在main.js中引入并使用vue-router：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

3.在src目录下创建router.js文件，并配置路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

4.在App.vue中使用router-link组件实现页面跳转：

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>


在上面的代码中，我们使用了router-link组件来实现页面跳转，to属性定义了跳转的路径，
点击后会自动引导vue-router进行路由跳转。同时，在App.vue中使用了router-view组件来显示当前路由对应的组件内容。

5.在views目录下创建Home.vue和About.vue组件，用于展示不同的页面内容。

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

至此，我们就完成了一个简单的vue-router页面跳转的示例。需要注意的是，这里使用了history模式进行路由跳转，
这意味着我们需要配置服务器，以便在浏览器中刷新页面时不会出现404错误。如果不需要使用history模式，
可以将router.js中的mode属性改为hash模式。