1. Directly use the router to jump
To use router (router) for page jump in Vue, you need to install the vue-router module first. Run the following command in terminal to install:
npm install vue-router
After the installation is complete, introduce vue-router in the main.js file of the project, and create a new router instance:
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
In the above code, we defined two routes (Home and About), and passed a parameter in the About route: id.
Use router for page jump in App.vue:
<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>
In the above code, we use the router-link component to jump to the page, and pass a parameter in the About route: id.
Get the :id parameter in the About component:
<script>
export default {
name: 'About',
props: ['id']
}
</script>
The parameters passed by the route can be obtained through the props attribute. Now you can use this.id in the About component to get the passed parameters.
2. Use js to jump
There are many ways to use JavaScript to jump and pass parameters. Here are some examples:
-
Use location.href to realize jump and pass parameters:
// 跳转到指定页面 并且传入参数
location.href = 'detail.html?id=123&name=张三';
In the page that needs to receive parameters, the passed parameters can be obtained through the following code:
// 获取url中的参数
const searchParams = new URLSearchParams(window.location.search);
// 根据参数名获取参数值
const id = searchParams.get('id');
const name = searchParams.get('name');
console.log(id, name); //输出：123 张三
-
Use window.open to open a new window and pass parameters:
// 在新窗口打开指定页面并且传入参数
window.open(`example.html?id=${123}&name=${encodeURIComponent('张三')}`);
In the page that needs to receive parameters, the passed parameters can be obtained through the following code:
// 获取url中的参数
const searchParams = new URLSearchParams(window.location.search);
// 根据参数名获取参数值
const id = searchParams.get('id');
const name = decodeURIComponent(searchParams.get('name'));
console.log(id, name); //输出：123 张三
In a Vue project, the following methods can be used for page jumping:
Use Vue Router for routing jumps:
this.$router.pushRouting jumps can be performed through methods in Vue components .
// 在Vue组件中进行页面跳转
this.$router.push('/detail?id=123&name=张三');
In the component that needs to receive parameters, the passed parameters can be obtained through the following code:
// 获取路由参数
const id = this.$route.query.id;
const name = this.$route.query.name;
console.log(id, name); //输出：123 张三
3. Case
A simple Vue case is provided below, which realizes that the article list page jumps to the article details page, obtains the article information according to the id and fills the page
In the App.vue file:
<template>
<div>
<router-view />
</div>
</template>
<script>
export default {
name: "App"
};
</script>
In the main.js file:
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");
In the router/index.js file:
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;
In the views/ArticleList.vue file:
<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>
In the views/ArticleDetail.vue file:
<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>
When we click on an article in the list, it will jump to the corresponding article details page. Through routing parameters, we can get the passed id in the ArticleDetail component, and get the article information in the background according to the id, and finally fill it on the page.