preface :

study vue It's been a while , Here is the whole study vue Some knowledge points and problems in the project , Sort it out for your convenience , I also hope to bring convenience to you . I will write several systematic articles in succession , Explain a complete vue Each module used in the project . Today, let's learn how to use routing .

one ,Vue Router

Vue Router yes Vue.js Official routing manager . It and Vue.js
Core deep integration , Make it easy to build a single page application . My simple understanding is that we see that we click on a link in some pages, which does not render the whole page , It's a re rendering of a partial page ( such as : You can see his name when some pages jump title Each page is fixed , It won't change , This part is not re rendered ), And the links above will change accordingly , The whole is the result of using routing , It can greatly reduce our resource requests and page rendering . This is the role of routing , Routing generally follows vue
Use with components , You can understand it as a Link jump , We just specify to jump to another page we want .

two , install Vue Router

If your project is using vue-cli If built ( as for vue-cli How to install and build scaffolding tools , You can read my previous article ), When creating the project, you will be asked to choose whether to install it or not Vue
Router, If you install , You don't need to install , If your project is built directly , Then you need to install , Enter directly in the project root directory

npm install vue-router

If you install cnpm Words , Direct input

cnpm install vue-router

Recommended here cnpm, It will be much faster .

After running, we will finish the installation , Because I use vue-cli Built project , All here vue-cli Environment oriented , as