1.直接用router跳转

在Vue中使用路由器(router)进行页面跳转，需要先安装vue-router模块。在终端中运行以下命令安装：

npm install vue-router

安装完成之后，在项目的main.js文件中引入vue-router，并且创建一个新的router实例：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about/:id',
      name: 'About',
      component: About
    }
  ]
})

export default router

上面的代码中，我们定义了两个路由(Home和About)，并且在About路由中传递了一个参数:id。

在App.vue中使用router进行页面跳转：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link :to="{ name: 'About', params: { id: 1 }}">About</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
}
</script>

在上面的代码中，我们使用了router-link组件进行页面跳转，并且在About路由中传递了一个参数:id。

在About组件中获取:id参数：

<script>
export default {
  name: 'About',
  props: ['id']
}
</script>

通过props属性可以获取路由传递的参数。现在就可以在About组件中使用this.id获取到传递的参数了。

2.用js跳转

使用JavaScript进行跳转和传参有多种方法，以下是其中的一些示例：

1. 使用location.href实现跳转和传参：

// 跳转到指定页面 并且传入参数
location.href = 'detail.html?id=123&name=张三';

在要接收参数的页面中，通过以下代码可以获取传递的参数：

// 获取url中的参数
const searchParams = new URLSearchParams(window.location.search);

// 根据参数名获取参数值
const id = searchParams.get('id');
const name = searchParams.get('name');

console.log(id, name); //输出：123 张三

1. 使用window.open实现新窗口打开并传递参数：

// 在新窗口打开指定页面并且传入参数
window.open(`example.html?id=${123}&name=${encodeURIComponent('张三')}`);

在要接收参数的页面中，可以通过以下代码获取传递的参数：

// 获取url中的参数
const searchParams = new URLSearchParams(window.location.search);

// 根据参数名获取参数值
const id = searchParams.get('id');
const name = decodeURIComponent(searchParams.get('name'));

console.log(id, name); //输出：123 张三

在Vue项目中，可以使用以下方法进行页面跳转：

使用Vue Router进行路由跳转：

在Vue组件中可以通过this.$router.push方法进行路由跳转。

// 在Vue组件中进行页面跳转
this.$router.push('/detail?id=123&name=张三');

在要接收参数的组件中，可以通过以下代码获取传递的参数：

// 获取路由参数
const id = this.$route.query.id;
const name = this.$route.query.name;

console.log(id, name); //输出：123 张三

3.案例

下面提供一个简单的Vue案例，实现文章列表页面跳转到文章详情页面，根据id获取文章信息并填充页面

在App.vue文件中：

<template>
  <div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

在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");

在router/index.js文件中：

import Vue from "vue";
import VueRouter from "vue-router";
import ArticleList from "../views/ArticleList.vue";
import ArticleDetail from "../views/ArticleDetail.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "ArticleList",
    component: ArticleList
  },
  {
    path: "/article/:id",
    name: "ArticleDetail",
    component: ArticleDetail,
    props: true
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

在views/ArticleList.vue文件中：

<template>
  <ul>
    <li v-for="article in articles" :key="article.id">
      <router-link :to="{name: 'ArticleDetail', params: {id: article.id}}">
        {{ article.title }}
      </router-link>
    </li>
  </ul>
</template>

<script>
export default {
  name: "ArticleList",
  data() {
    return {
      articles: [
        { id: 1, title: "文章1" },
        { id: 2, title: "文章2" },
        { id: 3, title: "文章3" }
      ]
    };
  }
};
</script>

在views/ArticleDetail.vue文件中：

<template>
  <div>
    <h1>{{ article.title }}</h1>
    <p>{{ article.content }}</p>
  </div>
</template>

<script>
export default {
  name: "ArticleDetail",
  data() {
    return {
      article: {}
    };
  },
  mounted() {
    const id = this.$route.params.id;
    // 根据id去后台获取文章信息
    this.article = { id: id, title: "文章" + id, content: "这是文章" + id + "的内容" };
  }
};
</script>

当我们点击列表中的文章，会跳转到对应的文章详情页面。通过路由传参，我们可以在ArticleDetail组件中获取到传递过来的id，并根据id去后台获取文章信息，最终填充到页面上。