[Vue] Three ways to introduce the official routing manager vue-router library into the Vue project

Preface

Vue Router is the official routing manager for Vue.js. It can help us implement jumps and navigation between pages in Vue applications, and provides some advanced functions, such as routing parameters, routing nesting, routing guards, etc.

The main function of Vue Router is to map different components to different URLs and update the view based on URL changes. It is based on Vue's component system, which allows us to use components to define different pages and access and navigate these pages through URLs.

Using Vue Router, we can jump between pages through programmatic navigation or declarative navigation. Programmatic navigation implements route jumps by writing JavaScript code, while declarative navigation implements route jumps by using the <router-link> tag in the template.

---

Core idea

1. Router: Responsible for managing the entire routing system, including routing registration and configuration.
2. Route: represents a route, including path, parameters, query parameters and other information.
3. Route Component: A component mapped by a route, which displays different components according to different routes.
4. Router View: used to display the components corresponding to the current route and can be nested.
5. Router Link: Generate a link to trigger routing jumps.

---

Install

Install the vue-router library under the Vue.js framework. You can install it in the following three ways:

1. Download files from official website

   Download the vue.js and vue-router.js files from the official website, and then introduce these two files into the HTML file.

   https://router.vuejs.org/

2. Use CDN

   You can directly download the vue-router library file, or you can directly use the CDN address to reference it.

   <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
   

3. Using NPM

   Install vue-router using the NPM package management tool command.

   npm install vue-router
   

---

Summarize

Through the above method, we can easily introduce the official routing manager vue-router library into the Vue project. Vue Router provides powerful features, including route mapping, navigation, route parameters, route nesting, route guards, etc. We can jump between pages through programmatic navigation or declarative navigation. You can install vue-router by downloading files from the official website, using CDN, or using NPM. Once installed, we can use vue-router in Vue applications to implement route management and navigation functions.