![ Insert picture description here ](https://s2.51cto.com/images/20210808/1628424256690507.jpg)

The core of front-end routing ： change URL, But the page does not refresh as a whole

[](

)URL Of hash

URL Of hash That is to say Anchor point (#), It's essentially a change window.location.href attribute

• We can do this by assigning values directly location.hash To change href, But the page doesn't refresh

  

[](

)HTML5 Of history Pattern （5 Kind of ）

history Interface is HTML5 Newly added , It has five pattern changes URL Without refreshing the page

• history.pushState()

  

• history.replaceState()

  

• history.go()

  

Add ：

• history.back() Equivalent to history.go(-1)

• history.forward() Equivalent to history.go(1)

• These interfaces are equivalent to the forward and backward of the browser interface

vue-router

=============================================================================

At present, there are three popular frameworks in the front end , Each has its own routing implementation ：

• Angular Of ngRouter

• React Of ReactRouter

• Vue Of vue-router

vue-router yes Vue.js The official routing plug-in , It and Vue.js It's deeply integrated , Suitable for building single page applications

vue-router Official website : https://router.vuejs.org/zh/

vue-router It's based on Routing and components

• Routing is used to set the access path , Mapping paths and components

• stay vue-router In a single page application , The change of page path is the switch of components .

Installation and use vue-router

We have learned webpack, In the follow-up development, we mainly develop in an engineering way

install vue-router

npm install vue-router --save


1.
2.
3.

Use it in modular Engineering （ Because it's a plug-in , So you can go through Vue.use() To install the routing function ）

• Import routing objects , And call Vue.use(VueRouter)

• Create a routing instance , And incoming route mapping configuration

• stay Vue The created routing instance is mounted in the instance

Use vue-router Steps for ：

• Create routing component

• Configure route mapping : Component and path mapping relationships

• Using routing ： adopt <router-link> and <router-view>

Routing configuration generally does not need to be configured by yourself , It's all equipped in the scaffold , Focus on the use of routing .

• <router-link>： The label is a vue-router Built in components in , It will be rendered as a <a> label

• <router-view>： The tag will be based on the current path , Dynamic rendering of different components

• The rest of the page , Like the title at the top / Navigation , Or some copyright information at the bottom will be related to <router-view> At the same level

• When routing is switched , The switch is <router-view> Mounted components , Nothing else will change

  

Routing effect ：

[](

) The default path for routing

By default , Go to the home page of the website , We hope <router-view> Rendering the content of the home page

• How to make the path jump to the home page by default , also <router-view> Rendering the home page component ?

• Configure pair in routing configuration '/' The mapping of paths ,redirect Is redirection

  

[](

)HTML5 Of History Pattern

As we said earlier, there are two ways to change the path ：

• URL Of hash

• HTML5 Of history

• By default , The change of path uses URL Of hash

Can be configured to use HTML5 Of History Pattern , Reference resources Official documents

Road load by lazy

Official explanation ： When you package and build an application ,Javascript The bag will get very big , Affects page loading . If we can divide the components corresponding to different routes into different code blocks , Then the corresponding component is loaded when the route is accessed , It's more efficient .

The main function of lazy route loading is ： Package the components corresponding to the route into one by one js Code block , Only when this route is accessed , Load the corresponding component .

The effect of routing lazy loading ：

Lazy loading in code ：

• Mode one ： combination Vue The asynchronous components and Webpack Code analysis of

const Home = resolve => { require.ensure(['../components/Home.vue'],
() => { resolve(require('../components/Home.vue')) })};


1.
2.
3.
4.
5.

• Mode two ：AMD How to write it

const About = resolve => require(['../components/About.vue'], resolve);


1.
2.
3.

• Mode three ： Use ES6 Grammar to organize Vue Asynchronous components and Webpack Code segmentation for

const Home = () => import('../components/Home.vue')


1.
2.
3.

Nested Route

Nested routing is a very common feature ,

• For example home On the page , Hope to pass /home/news and /home/message Visit some content

• A path maps to a component , Accessing these two paths will also render two components separately

  

Two steps to implement nested routing ：

• Create the corresponding sub component , And configure the corresponding sub route in the routing map

• Use... Inside the component <router-view> label

Nested routing examples ：

1. Define two components

   

2. Use router-link and router-view Show subcomponents

   

3. Configure the routing

   

4. Show the effect

   

[](

) Default path for nested routes

Nested routes can also be configured with default paths , The configuration is as follows ：

Routing parameters

There are two main types of passing parameters ：params and query

params The type of ：

• Configure routing format ：/router/:id

• The way of transmission ： stay path Follow the corresponding value

• The path formed after transmission ：/router/123,/router/abc

query The type of ：

• Configure routing format ：/router, It's a normal configuration

• The way of transmission ： Use in object query Of key As a means of delivery

• The path formed after transmission ：/router?id=123,/router?id=abc

Two ways of use ：

• <router-link>

  

• JavaScript Code mode

  

$route To obtain parameters

Get parameters by $route Object acquired

In the use of the vue-router The application of , Routing objects are injected into each component , The assignment is this.$route, And when the route switches , The routing object is updated .

adopt $route The information to be transmitted is as follows ：

$route and $router The difference between ：

• $router by VueRouter example , Want to navigate to different URL, Use $router.push Method

• $route by At present router Jump object , You can get name、path、query、params etc.

Finally, share a wave ,Java Advanced knowledge points of core architecture

In fact, success in an interview is inevitable , Because I've done enough preparation before that , It's not just about writing questions , More will go to brush some Java Advanced knowledge points of core architecture , such as ：JVM、 High concurrency 、 Multithreading 、 cache 、Spring relevant 、 Distributed 、 Microservices 、RPC、 The Internet 、 Design patterns 、MQ、Redis、MySQL、 Design patterns 、 Load balancing 、 Algorithm 、 data structure 、kafka、ZK、 Cluster etc. . And all of these have been condensed into one pdf——《Java Advanced knowledge points of core architecture 》, All are the cream of the essence. , In a win-win mentality , Good things should be shared

There are many contents , Space is limited , This is not too much introduction , According to the above screenshots, you can make up your own mind , But this one 《Java Advanced knowledge points of core architecture pdf》 And the front P8 The whole set of interview questions can be shared with you for free , Click here to get all the information in the article for free