The target

The concept of being able to say a way out
Be able to tell the basic steps of using vue-Router
Be able to say the nested usage of vue-router
Vue- Router dynamic route matching
Able to name vue-router named routes
Able to speak vue-Router programmatic navigation usage
Service functions can be realized based on routing

1. The routing

1.1 Back-end Routes

Concept: Return different content according to different user URL requests
Essence: The mapping between the URL request address and the server resource

1. spa

The back-end rendering
Ajax front-end rendering
SPA single page application: The entire site is a single page, content changes through Ajax partial updates, and supports the browser address bar to move forward and back
One of the principles of SPA implementation: URL-address-based hash(changes in hash will cause the browser to record changes in access history, but changes in hash will not trigger new URL requests)
In the process of implementing SPA, the core technology is front-end routing

2. Front-end routes

In charge of event listening, after triggering the event through the event function render different content
Concept: Display different page content according to different user events
Essence: Correspondence between user events and event handlers

3. Implement simple front-end routing

Implementation based on the HASH in the URL (change the HASH of the URL when clicking on the menu, control component switching based on the hash change)

// Listen for the window's onHashchange event, based on the latest hash value, Toggle the name of the component to display window.onhashchange = function() {// Get the latest hash value from location.hash}Copy the code

1.2 the Vue Router

Vue Router is the official route manager of vue. js

Support HTML5 historical mode or hash mode
Support nested routines by
Supported Routing parameters
Support for programmatic routing
Support named Routing

2. Basic use of vue-Router

2.1 Basic Procedure

1. Import library files

<! <script SRC ="./lib/vue_2.5.22.js"></script> <! <script SRC ="./lib/vue-router_3.0.2.js"></script>Copy the code

2. Add a route link

<! -- Router-link is a tag provided in vue and will be rendered as a tag by default --> <! The to attribute is rendered as the href attribute by default --> <! -- The value of the to attribute will be rendered as a hash address starting with # --> <router-link to="/user"> user </router-link> <router-link to="/register">Register</router-link>Copy the code

3. Add the route filling bit

<! -- Route padding bit (also called route placeholder) --> <! <router-view></router-view>Copy the code

4. Define routing components

var User = {
    template: '<div>User</div>'
}
var Register = {
    template: '<div>Register</div>'
}
Copy the code

5. Configure routing rules and create routing instances

Var router = new VueRouter({routes = new routes) [// Each routing rule is a configuration object that contains at least two attributes, path and Component: // Component Indicates the component to be displayed. {PATH :'/user', Component: user}, {path:'/register', Component: Register} ]Copy the code

6. Mount the route to the Vue root instance

New Vue({el: '#app', // In order for the rule to take effect, the router must be mounted on the Vue instance object);Copy the code

2.2 Route Redirection

Route redirection means that when A user accesses address A, the user is forced to go to address C to display A specific component page. Specifying a new route address using the redirect attribute of the routing rule makes it easy to set route redirection:

Var router = new VueRouter({routes: [// routes:]) {route: '/', redirect: = new VueRouter({routes: [// routes:]) {route: '/', redirect: '/user'}, {path: '/user', component: User}, {path: '/register', component: Register} ] })Copy the code

3. Nested routines depend on usage

3.1 Nested routines are determined by usage

2. Parent route component template

Parent routing link
Parent component route padding bit

<p> <router-link to="/user">User</router-link> <router-link to="/register">Register</router-link> </p> <div> <! Router-view </router-view> </div>Copy the code

3. Padding bit of sub-route

Sub-routing links
Padding bit of sub-route

const Register = { template: '<div> < H1 >Register component </h1> <hr/> <router-link to="/ Register /tab1"> tab1 </router-link> <router-link to="/register/tab2">Tab2</router-link> <! <router-view/> </div> '}Copy the code

4. The nested routine is configured

Parent route The children attribute is used to configure the child route

Const router = new VueRouter({// routes: [// children] {path: '/register', Component: Register, children: [ { path: '/register/tab1', component: Tab1 },{ path: '/register/tab2', component: Tab2 } ] } ] })Copy the code

4. Vue-router Matches dynamic routes

4.1 Basic Usage of Dynamic Matching Routes

Think about:

<! - There are three router links: -> <router-link to="/user/1">User1</router-link> <router-link to="/user/2">User2</router-link> <router-link to="/user/3">User3</router-link>Copy the code

Is it feasible to define the following three routing rules? { path: '/user/1', component: User } { path: '/user/2', component: User } { path: '/user/3', component: User }Copy the code

Problem: With the above method, there are a thousand ids to define a thousand lines of code, which is inconvenient

Solution: Routes are matched by the pattern of dynamic routing parameters

Var router = new VueRouter({routes: [path: '/user/:id', Component: user}]})Copy the code

{$route.params.id}}</div>'} {$route.params.id}}Copy the code

4.2 Routing Components Transfer parameters

$route is highly coupled to the route, so you can use props to decouple the component from the route

1. The value of props is of the Boolean type

Const router = new VueRouter({routes: [// if props is set to true, route.params will be set to component {path: '/user/:id', Component: User, props: true}]}) const User = {props: ['id'], <div> User ID: {{ID}}</div>Copy the code

2. The value of props is the object type

Const router = new VueRouter({routes: [// If the props were an object, it would be set as component properties {path: '/user/:id', Component: user, props: { uname: 'lisi', age: 12 }} ] }) const User = { props: ['uname', 'age'], template: {{uname + '-- '+ age}}</div>'}Copy the code

3. The value of props is a function type

Const router = new VueRouter({routes: [// if props is a function, this function accepts the route object as its parameter {path: '/user/:id', Component: User, props: route => ({ uname: 'zs', age: 20, id: route.params.id })} ] }) const User = { props: [' uname ', 'age', 'id'], the template: '< div > user information: {{uname + + age' - '+' - '+ id}}} < / div >'Copy the code

6. Vue-router Named the route

6.1 Configuration Rules for Named Routes

To better represent the route path, you can alias the routing rule named Route.

const route = new VueRouter({
    routes: [
    { 
        path: '/user/:id',
        name: 'user',
        component: User
     }
  ]
})
Copy the code

<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link> router.push({ name: 'user', params: { id: 123}})Copy the code

Vue-router programmatic navigation

5.1 Two Modes of Page Navigation

Declarative navigation: The way to navigate by clicking on a link, called declarative navigation. For example, in a common web page<a></a>Link or vUE<router-link></router-link>
Programmatic navigation: Called programmatic navigation by calling aN API in the form of JavaScript such as location.href in ordinary web pages

5.2 Basic usage of programmatic navigation

Common programmatic navigation apis are as follows:

This $route. Push (‘ hash address)
this.$router.go(n)

</button></div> const User = {template: '<div>< button@click ="goRegister"> $router. Push ('/ /register') {function(){this.$router. Push ('/ /register'); }}}Copy the code

5.3 Programmatic navigation parameter rules

Parameter rules for router.push() methods

// String (path name) router.push('/home') // Object router.push({path: '/home'}) // Named route (pass parameter) Router.push ({name: '/user', params: {userId: 123}}) // register? uname=lisi router.push({ path: '/register', query: { uname: 'lisi' }})Copy the code

7. The case based on vue-Router

The component structure is divided according to the overall layout of the project, and the display of the component is controlled by routing navigation

Extract and render the App root component
Transform the left menu into a routing link
Create the routing component corresponding to the menu on the left
Add a route placeholder in the main area on the right
Add child routing rules
Default render user components via route redirection
Render user list data
Programmatic navigation jumps to the user details page
Implement the backward function

Vue whole family bucket – Front-end routing