Routrt-link differs from router-View and a tag
<routrt-link> is vue-router is a built-in component of VUE that will be rendered as <a> tags. <router-view> will dynamically render different components based on the current path. Other content of the page, such as the title at the top, Navigation Vue router-link and A tag are both links, which are equivalent to a tag. The difference is that the "jump" behavior of link only triggers the corresponding page content update, but does not refresh the entire page. The A tag is a normal hyperlink that jumps from the current page to another page that the href points to, refreshing the entire pageCopy the codeLazy route loading (The first blank page can be optimized with lazy route loading)
- Route lazily loads packed effects
- The third method is commonly used to load routes lazily
- The path in children does not need a /, and the path in the home tag to needs a /
- Two ways to pass parameters (Query can pass objects, params can only pass simple data)
use
Route-link (navigation)
JavaScript code (programmatic)
URL composition (Wikipedia) Protocol: // Host: port/path? Scheme: //host: port, path? Query# fragments (pieces)Copy the code
Route b
Router is an instance of vueRouter, and if you want to navigate to different urls, you use router as an instance of vueRouter, Router. push ($route) is the router jump object, which can obtain name, path, query, params, etc
All components inherit from the vue class prototype
Any component $router gets the same
$route Displays the most active route information
Simple source code analysis under the time to pay attention to the use of vue-Router version, modules view the current most accurate
DefineProperty is the core of VUE bidirectional binding
An example use of defineProperty here
Route redirect mode
A, the router – the link
1. No parameters are required
< the router - link: to = "{name: 'home'}" > < the router - link: to = "{path: '/ home'}" > / / name, path, suggest using name / / note: In router-link, if a link starts with a '/', it starts from the root route; if a link does not start with a '/', it starts from the current route.Copy the code2. Take parameters
<router-link :to="{name:'home', params: {id:1}}" <router-link :to="{name:'home', params: {id:1}}"> "/home:id" // no path is configured, the first request can be made, the page ID will not be refreshed // Set path, the page ID will be retained // HTML take the parameter $route.params.id // script take the parameter this.$route.params.id <router-link :to="{name:'home', query: {id:1}}"> // query: $route.query.id; // HTML: $route.query.idCopy the codeSecond, the enclosing $router. Push ()
Jump to the specified URL path and want to add a record to the history stack. Click Back to return to the previous page
1. No parameters are required
This $router. Push ('/home ') enclosing $router. Push ({name: 'home'}) enclosing $router. Push ({path: '/ home'}) # # # # # 2. The query parameter this.$router.push({name:'home',query: {id:'1'}}) this.$router.push({path:'/home',query: {id:'1'}}) // HTML takes the parameter $route.query.id // script takes the parameter this.$route.query.idCopy the code3. The params refs
This.$router.push({name:'home',params: {id:'1'}}) "/home:id" , $route.params.id = $route.params.id = $routeCopy the code4. Difference between Query and Params
Query is similar to get. After a jump, the page URL will be concatenated with parameters. If id=1, non-important items can be passed like this. If password is used as params, the page ID is still in params similar to POST. After the jump, no parameter will be concatenated after the page URL, but the page ID will disappear
$router. Replace () this.$router. Replace ()
Jumps to the specified URL path, but there is no record in the history stack
Four, enclosing $router. Go (n) ()
This.$router.go(n) jumps forward or backward to n pages, n can be a negative or positive integer
ps : $router. Replace: this.$router. Replace: this. $router.go(n) this.$router.go(n) is a positive or negative integerCopy the code