First, the routing configuration
Routing vue-router
1. What is the route?
Routing configuration object corresponding to a
Routing: that we through various different url to access the content, we can achieve more than a single page view by angular.js, now the popular one-page development mode.
2. There are two routes in the web:
The first hash hash value preceded #
" https: // user : pass @ sub.example.com : 8080 /p/a/t/h ? query=string #hash "
The second is the history of this subject without routing #
mode:"history",
$ Router: a router object that contains some operations based routing function that is programmed navigation (Jump route)
$ Route: the current routing objects, some of the current vessel routing information data, path / meta / query / params
3. How to achieve routing
1. In use the template <router-link = "/ path"> realize jump function to replace the a vue own components, to replace attribute href.
<router-link to = "/ home"> I'm Home </ Router-Link> to = "xx" to be to jump to the routing path
2. Use the <router-view> used to store your information, this is equivalent to a container, which kept a lot of components, I point who, who put into correspondence templates inside.
<router-view></router-view>
Component mount a single route
Components mount multiple routes
This path: "/ weixin" corresponds to the route to jump = "/ weixin", then mount component corresponds to the component, the component appears on this page click realize routing.
4. how to achieve vue routing remember the words
1. set
Custom components, so and so come to the point, made to the project vue, a large number of components of the splicing
2. With
1. Configure routing, let professional path and said component (the mapping is successful) White as saying one correspondence
2. The routing configuration value is an array
3. Routing component is, this is just routing configuration
4. to="/home"对应id="home"
3. Real
1. The routing configuration is successful, people know, but do not necessarily know vue, need to go into the routing configuration
2. The routes are vue-router option inherent in
4. Hanging
1. The routing instance to mount the instance vue
2. router option is to mount a routing instance
3. mounted router routing instance, to mount the router router1
5. Replace the routing mode:
The default mode is to hash, in the example of the routing option to add mode: "history"
6. routing nesting:
1. The first step in writing your nested components inside
Used in the template <router-link = "/ path"> realize jump function to replace the a vue own components, to = "xx".
Jump inside template components
Use <router-view> stored content is rendered
2. Second configured to route the route in the nested configuration inside {}
Children are sub-route configuration
7. routing parameters
Written: in the routing arrangement, at the corresponding components
A template with different parameters and different content data, the need to obtain parameters
http://127.0.0.1:8848/weixin/12 acquisition parameters network address 12, argument is
1. <router-link to="/friends/13">好友</router-link>
2. In the configuration inside the transfer route parameter id
3. Examples of the component request to the initialization data, it can be output.
作者：晋飞翔
手机号(微信同步)：17812718961
希望本篇文章 能给正在学习 前端的朋友 或 以及工作的朋友 带来收获 不喜勿喷 如有建议 多多提议 谢谢！