Home > Developer > Web Develop
Vue, when we build a single page application, it must be necessary to use Vue-router
Vue-router is our route, a plugin that is officially provided by Vue.
First install the Vue-router routing dependency in our project
First, we provide the command line to install
NPM Install Vue-router--save
Second, we go directly to the official GitHub download
Https://github.com/vuejs/vue-router
Routing parameter settings
1, instantiate a route, and then route the address with parameters in the map table, this parameter is the parameter of the route
Then set a name value for the route in the map table
Grammar
{path: "/home/:id,component:home,name:" Wang "}
2. When we mount the Vue instance up, we are in the home component to get the current route parameters
Syntax this. $route. Params. Parameter name
3. set route navigation to different paths depending on the current parameters
<router-link:to= "{name: ' Wang ',params:{id:1}}></router-link>
Here's an example.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title></Head><Body><DivID= "App"> <!--If dynamic binding is used, and the params must add a name to the route - <Router-linkv-for= "(item,index) in article": Key= "Index": to= "{name: ' Wang ', Params:{id:item.id}}"Tag= "Div">{{Item.title}}</Router-link> <Router-view></Router-view></Div></Body><Scriptsrc= "Node_modules/vue/dist/vue.js"></Script><Scriptsrc= "Node_modules/vue-router/dist/vue-router.js"></Script><Script> //Defining a componentLet article={Template:"<div> This is the {{id}} Chapter </div>", computed:{ID () {//gets the parameter value of the route path return This. $route. params.id; }, Name () {//gets the parameter value of the route path return This. $route. Params.name; } } } //Routing Path Mapping tableLet routes=[ //: ID indicates that the parameter must be passed, but the content can be random //The value after the current colon and the value that is actually passed are made into an object //This . $route. params={id:123} //{path: ', component:e}//default route, which is equivalent to configuring a //{path: ' * ', redirect: '/article/:1 '}//default redirect, typically used as a 404 page, will cause the path to change{path:"/article/:id", Component:article,name:'Wang'} ] //instantiate a routeLet router=Newvuerouter ({routes}) Router.push ('/ARTICLE/1'); //default load First path settingLet vm=NewVue ({el:"#app", data:{article:[{title:"111", ID:1}, {title:"111", ID:2}, {title:"111", ID:3}]}, router})</Script></HTML>
Simple example of Vue.js routing parameters------easy to understand
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
