Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to achieve routing parameters in Spring Boot/VUE". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "how to achieve routing parameters in Spring Boot/VUE"!

Parameters are usually passed in two forms when routing, one is spliced in the url address, and the other is query parameters. Such as: http://localhost:8080/router/tang/101?type=spor&num=12. Let's take a look at how parameters are passed and accepted in VUE and Spring Boot, respectively, according to the code.

Spring Bootpackage com.tang.demo1.controller; import org.springframework.web.bind.annotation.* @ RestController public class RouterController {@ RequestMapping (path = {"/ router/ {name} / {classid}"}, method = RequestMethod.GET) public String router (@ PathVariable ("name") String name, @ PathVariable ("classid") int classid, @ RequestParam (value = "type", defaultValue = "news") String type, @ RequestParam (value = "num", required = falsef) int num) {/ / visit http://localhost:8080/router/tang/101?type=spor&num=12 return name + classid + type + num }} in the url path, it is called pathVariable, and the query parameter is called pequestParm. Accept parameters in controller, which can be used directly in the method. VUEroutes: [{path:'/', name: 'HomePage', component: HomePage}, {path:' / user/:id?/:type?', name: 'User', component: User}]

First of all, configure the parameters that need to be passed in the url in the route, which are called dynamic path parameters. Start with ":" and end with "?" Expressed as an optional parameter.

User

{{item.name}}

-

{{childName}} var list = [{'name':' xiaoming', 'id': 123,' type': 'vip'}, {' name': 'gangzi',' id': 456, 'type':' common'}] export default {data () {return {userList: list, childName: null}} Watch: {$route () {if (this.$route.params.id) {this.childName = this.$route.params.id +'/'+ this.$route.query.name } else {this.childName = null}, methods: {}, created () {/ / this.$route.params is the dynamic path parameter if (this.$route.params.id) {/ / this.$route.params is the query parameter this.childName = this.$route.params.id +'/'+ this.$route.query.name } else {this.childName = null}}, deactivated () {console.log ('deact')}, computed: {}, components: {}}

The accepted parameters in vue need to be obtained from the routes instance. The dynamic path parameters are in params and the query parameters are in query.

When the dynamic path component of vue is active, if you change the dynamic path parameters, the method written in created () will not be called again because the component has been created. At this point, you can add a watch to $route and get the data when it changes.

Parameters are usually passed in two forms when routing, one is spliced in the url address, and the other is query parameters. Such as: http://localhost:8080/router/tang/101?type=spor&num=12. Let's take a look at how parameters are passed and accepted in VUE and Spring Boot, respectively, according to the code.

Spring Bootpackage com.tang.demo1.controller; import org.springframework.web.bind.annotation.* @ RestController public class RouterController {@ RequestMapping (path = {"/ router/ {name} / {classid}"}, method = RequestMethod.GET) public String router (@ PathVariable ("name") String name, @ PathVariable ("classid") int classid, @ RequestParam (value = "type", defaultValue = "news") String type, @ RequestParam (value = "num", required = falsef) int num) {/ / visit http://localhost:8080/router/tang/101?type=spor&num=12 return name + classid + type + num }}

The one in the url path is called pathVariable, and the query parameter is called pequestParm. Accept parameters in controller, which can be used directly in the method.

VUE

Routes: [{path:'/', name: 'HomePage', component: HomePage}, {path:' / user/:id?/:type?', name: 'User', component: User}]

First of all, configure the parameters that need to be passed in the url in the route, which are called dynamic path parameters. Start with ":" and end with "?" Expressed as an optional parameter.

User

{{item.name}}

-

{{childName}} var list = [{'name':' xiaoming', 'id': 123,' type': 'vip'}, {' name': 'gangzi',' id': 456, 'type':' common'}] export default {data () {return {userList: list, childName: null}} Watch: {$route () {if (this.$route.params.id) {this.childName = this.$route.params.id +'/'+ this.$route.query.name } else {this.childName = null}, methods: {}, created () {/ / this.$route.params is the dynamic path parameter if (this.$route.params.id) {/ / this.$route.params is the query parameter this.childName = this.$route.params.id +'/'+ this.$route.query.name } else {this.childName = null}}, deactivated () {console.log ('deact')}, computed: {}, components: {}}

The accepted parameters in vue need to be obtained from the routes instance. The dynamic path parameters are in params and the query parameters are in query.

When the dynamic path component of vue is active, if you change the dynamic path parameters, the method written in created () will not be called again because the component has been created. At this point, you can add a watch to $route and get the data when it changes.

Parameters are usually passed in two forms when routing, one is spliced in the url address, and the other is query parameters. Such as: http://localhost:8080/router/tang/101?type=spor&num=12. Let's take a look at how parameters are passed and accepted in VUE and Spring Boot, respectively, according to the code.

Spring Bootpackage com.tang.demo1.controller; import org.springframework.web.bind.annotation.* @ RestController public class RouterController {@ RequestMapping (path = {"/ router/ {name} / {classid}"}, method = RequestMethod.GET) public String router (@ PathVariable ("name") String name, @ PathVariable ("classid") int classid, @ RequestParam (value = "type", defaultValue = "news") String type, @ RequestParam (value = "num", required = falsef) int num) {/ / visit http://localhost:8080/router/tang/101?type=spor&num=12 return name + classid + type + num }}

The one in the url path is called pathVariable, and the query parameter is called pequestParm. Accept parameters in controller, which can be used directly in the method.

VUE

Routes: [{path:'/', name: 'HomePage', component: HomePage}, {path:' / user/:id?/:type?', name: 'User', component: User}]

First of all, configure the parameters that need to be passed in the url in the route, which are called dynamic path parameters. Start with ":" and end with "?" Expressed as an optional parameter.

User

{{item.name}}

-

{{childName}} var list = [{'name':' xiaoming', 'id': 123,' type': 'vip'}, {' name': 'gangzi',' id': 456, 'type':' common'}] export default {data () {return {userList: list, childName: null}} Watch: {$route () {if (this.$route.params.id) {this.childName = this.$route.params.id +'/'+ this.$route.query.name } else {this.childName = null}, methods: {}, created () {/ / this.$route.params is the dynamic path parameter if (this.$route.params.id) {/ / this.$route.params is the query parameter this.childName = this.$route.params.id +'/'+ this.$route.query.name } else {this.childName = null}}, deactivated () {console.log ('deact')}, computed: {}, components: {}}

The accepted parameters in vue need to be obtained from the routes instance. The dynamic path parameters are in params and the query parameters are in query.

When the dynamic path component of vue is active, if you change the dynamic path parameters, the method written in created () will not be called again because the component has been created. At this point, you can add a watch to $route and get the data when it changes.

At this point, I believe you have a deeper understanding of "how to achieve routing parameters in Spring Boot/VUE". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.