vue点击按钮实现页面跳转

桃扇骨 2023-10-04 23:03 5阅读 0赞

## 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模式。