Web Front-end
JS Tutorial
About vue-router implementing jump parameter transfer between components
About vue-router implementing jump parameter transfer between components
This article mainly introduces the jump between components of vue-router and the parameter transfer method in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.
Use VueRouter to realize jumps between components: parameter transfer, the specific content is as follows
login ---Username--->main
①Clear Sender and receiver
②Configure the routing address of the receiver
{path:'/myTest',component:TestComponent}
-->
{path:' /myTest/:id',component:TestComponent}
③The receiver gets the passed data
this.$route.params.id
④Jump When transferring, send parameters
this.$router.push('/myTest/20')
Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>传参</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<!--指定容器 -->
<router-view></router-view>
</p>
<script>
//创建主页面组件
var myMain = Vue.component("main-component",{
//保存登录传递过来的数据
data:function(){
return {
uName:''
}
},
template:`
<p>
<h1>主页面用户名:{{uName}}</h1>
</p>
`,
//挂载该组件时自动拿到数据
beforeMount:function(){
//接收参数
console.log(this.$route.params);
this.uName = this.$route.params.myName ;
}
})
//创建登录页面组件
var myLogin = Vue.component("login-component",{
//保存用户输入的数据
data:function(){
return {
userInput:""
}
},
methods:{
toMain:function(){
//跳转到主页面，并将用户输入的名字发送过去
this.$router.push("/main/"+this.userInput);
console.log(this.userInput);
}
},
template:`
<p>
<h1>登录页面</h1>
<input type="text" v-model="userInput" placeholder="请输入用户名">
<button @click="toMain">登录到主页面</button>
<br>
<router-link :to="'/main/'+userInput">登录到主页面</router-link>
</p>
`
})
var NotFound = Vue.component("not-found",{
template:`
<p>
<h1>404 Page Not Found</h1>
<router-link to="/login">返回登录页</router-link>
</p>
`
})
//配置路由词典
const myRoutes = [
{path:"",component:myLogin},
{path:"/login",component:myLogin},
//注意冒号,不用/否则会当成地址
{path:"/main/:myName",component:myMain},
//没有匹配到任何页面则跳转到notfound页面
{path:"*",component:NotFound}
]
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter,
el:"#container",
data:{
msg:"Hello VueJs"
}
})
// 注意,路由地址
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>传参练习</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<!-- -->
<router-view></router-view>
</p>
<script>
//创建产品列表组件
var myList = Vue.component("product-list",{
//保存产品列表的数据
data:function(){
return{
productList:["苹果","华为","三星","小米","vivo"]
}
},
template:`
<p>
<h4>这是列表页</h4>
<ul>
<li v-for="(tmp,index) in productList">
//将index传递过去
<router-link v-bind:to="'/detail/'+index">{{tmp}}</router-link>
</li>
</ul>
</p>
`
})
//详情页组件
var myDetail = Vue.component("product-detail",{
//保存传递过来的index
data:function(){
return{
myIndex:""
}
},
//在挂载完成后,将接收到的index赋值给myIndex
mounted:function(){
this.myIndex = this.$route.params.id;
},
template:`
<p>
<h4>这是详情页</h4>
<p>这是id为：{{myIndex}}的产品</p>
</p>
`
})
//页面找不到的时候
var NotFound = Vue.component("not-found",{
template:`
<p>
<h1>404 Page Not Found</h1>
</p>
`
})
// 配置路由词典
const myRoutes = [
{path:"",component:myList},
{path:"/list",component:myList},
{path:"/detail/:id",component:myDetail},
{path:"*",component:NotFound},
]
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter,
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>Regarding the vue.js learning tutorial, please Click on the special vue.js component learning tutorial and Vue.js front-end component learning tutorial to learn.
Related recommendations:
Three Vue-Router methods to implement jumps between components
Detailed explanation of vue-router routing and Navigation between pages
Detailed solution to the problem of vue-router routing parameters disappearing after refreshing
The above is the detailed content of About vue-router implementing jump parameter transfer between components. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to install the Windows 10 old version component DirectPlay
Dec 28, 2023 pm 03:43 PM
Many users always encounter some problems when playing some games on win10, such as screen freezes and blurred screens. At this time, we can solve the problem by turning on the directplay function, and the operation method of the function is also Very simple. How to install directplay, the old component of win10 1. Enter "Control Panel" in the search box and open it 2. Select large icons as the viewing method 3. Find "Programs and Features" 4. Click on the left to enable or turn off win functions 5. Select the old version here Just check the box
I encountered the vue-router error 'NavigationDuplicated: Avoided redundant navigation to current location' in my Vue application - how to solve it?
Jun 24, 2023 pm 02:20 PM
The vue-router error "NavigationDuplicated:Avoidedredundantnavigationtocurrentlocation" encountered in the Vue application – how to solve it? Vue.js is becoming more and more popular in front-end application development as a fast and flexible JavaScript framework. VueRouter is a code library of Vue.js used for routing management. However, sometimes
How to implement calendar component using Vue?
Jun 25, 2023 pm 01:28 PM
Vue is a very popular front-end framework. It provides many tools and functions, such as componentization, data binding, event handling, etc., which can help developers build efficient, flexible and easy-to-maintain Web applications. In this article, I will introduce how to implement a calendar component using Vue. 1. Requirements analysis First, we need to analyze the requirements of this calendar component. A basic calendar should have the following functions: display the calendar page of the current month; support switching to the previous month or next month; support clicking on a certain day,
VUE3 development basics: using extends to inherit components
Jun 16, 2023 am 08:58 AM
Vue is one of the most popular front-end frameworks currently, and VUE3 is the latest version of the Vue framework. Compared with VUE2, VUE3 has higher performance and a better development experience, and has become the first choice of many developers. In VUE3, using extends to inherit components is a very practical development method. This article will introduce how to use extends to inherit components. What is extends? In Vue, extends is a very practical attribute, which can be used for child components to inherit from their parents.
Angular components and their display properties: understanding non-block default values
Mar 15, 2024 pm 04:51 PM
The default display behavior for components in the Angular framework is not for block-level elements. This design choice promotes encapsulation of component styles and encourages developers to consciously define how each component is displayed. By explicitly setting the CSS property display, the display of Angular components can be fully controlled to achieve the desired layout and responsiveness.
How to open the settings of the old version of win10 components
Dec 22, 2023 am 08:45 AM
Win10 old version components need to be turned on by users themselves in the settings, because many components are usually closed by default. First we need to enter the settings. The operation is very simple. Just follow the steps below. Where are the win10 old version components? Open 1. Click Start, then click "Win System" 2. Click to enter the Control Panel 3. Then click the program below 4. Click "Enable or turn off Win functions" 5. Here you can choose what you want to open
Vue and Vue-Router: How to share data between components?
Dec 17, 2023 am 09:17 AM
Vue and Vue-Router: How to share data between components? Introduction: Vue is a popular JavaScript framework for building user interfaces. Vue-Router is Vue's official routing manager, used to implement single-page applications. In Vue applications, components are the basic units for building user interfaces. In many cases we need to share data between different components. This article will introduce some methods to help you achieve data sharing in Vue and Vue-Router, and
Vue component development: implementation method of progress bar component
Nov 24, 2023 am 08:56 AM
Vue component development: Progress bar component implementation method Preface: In Web development, the progress bar is a common UI component, often used to display the progress of operations in scenarios such as data requests, file uploads, and form submissions. In Vue.js, we can easily implement a progress bar component by customizing components. This article will introduce an implementation method and provide specific code examples. I hope it will be helpful to Vue.js beginners. Component structure and style First, we need to define the basic structure and style of the progress bar component.
