In vue, when we build a single page application, we must use vue-router.
vue-router is our route, this plugin provided by vue official
First install vue-router routing dependencies in our project
The first one is provided with the command line to install
npm install vue-router --save
The second type is to download it directly at the official github
/vuejs/vue-router
Routing parameter settings
1. Instantiate a route, and then the address in the route mapping table has parameters. This parameter is the route parameter.
Then set a name value for the route in the mapping table
grammar
{path:"/home/:id,component:home,name:"wang"}
2. When we mount the Vue instance, we want to get the current routing parameters in the home component
Syntax this.$.parameter name
3. Set routing navigation to different paths according to the current parameters
<router-link :to="{name:'wang',params:{id:1}}></router-link>
Here is an example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div >
<!--If using dynamic binding，And there isparams You have to add a name to the route-->
<router-link v-for="(item,index) in article" :key="index" :to="{name:'wang',params:{id:}}" tag="div">{{}}</router-link>
<router-view></router-view>
</div>
</body>
<script src="node_modules/vue/dist/"></script>
<script src="node_modules/vue-router/dist/"></script>
<script>
//Define a component let Article={
template:"<div>This is the first{{id}}Chapter</div>",
computed:{
id(){
//Get the parameter value of the routing path return this.$;
},
name(){
//Get the parameter value of the routing path return this.$;
}
}
}
//Route path map table let routes=[
//:id means that parameters must be passed, but the content can be random //The value after the current colon and the value passed by the real object will be formed. // this.$={id:123}
//{path:'',component:E} //Default route, equivalent to configuring a //{path:'*',redirect:'/article/:1'} //Default redirect, generally used as a 404 page, will cause path changes {path:"/article/:id",component:Article,name:'wang'}
]
//Instantiate a route let router=new VueRouter({
routes
})
('/article/1'); //The first path setting is loaded by default let vm=new Vue({
el:"#app",
data:{
article:[
{title:"111",id:1},
{title:"111",id:2},
{title:"111",id:3}
]
},
router
})
</script>
</html>
The above example explanation based on routing parameters - simple and easy to understand is all the content I share with you. I hope you can give you a reference and I hope you can support me more.