vue跳转链接

// 使用 Vue Router 进行页面跳转的示例代码

// 1. 安装 Vue Router
// npm install vue-router

// 2. 创建 router.js 文件并配置路由
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

// 3. 在 main.js 中引入并使用路由
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');

// 4. 在组件中进行跳转
// 方法一：使用 <router-link> 标签
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

// 方法二：使用编程式导航
methods: {
  goHome() {
    this.$router.push({ name: 'home' });
  },
  goAbout() {
    this.$router.push({ name: 'about' });
  }
}

解释说明：

1. 安装 Vue Router：首先需要通过 npm 安装 vue-router。
2. 创建路由配置文件：在 router.js 文件中定义路由规则，指定路径和对应的组件。
3. 引入路由：在 main.js 中引入并使用路由实例。
4. 页面跳转：
   • 方法一：使用 <router-link> 标签进行声明式导航，点击链接即可跳转到指定页面。
   • 方法二：使用 this.$router.push() 方法进行编程式导航，在 JavaScript 代码中控制页面跳转。

以上代码展示了如何在 Vue 项目中配置和使用路由进行页面跳转。