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