Getting started with vue2 routing

1. Introduction to single-page applications

1. Concept

Single page application: SPA [Single Page Application] means that all functions are implemented on one html page

2. Specific examples

Single-page application website: NetEase Cloud Music https://music.163.com/

Multi-page application website: JD.com https://jd.com/

3. Single-page application VS multi-page application

• Single-page application websites: system websites/internal websites/document websites/mobile sites

• Multi-page application websites: company official website/e-commerce website

2. Introduction to routing

1. Think

The biggest reason why single-page applications have high development efficiency, good performance, and good user experience is that the page is updated on demand.

• For example, when you click [Discover Music] and [Follow], only the following part of the content will be updated , and the header will not be updated.

• To update on demand, you first need to clarify: the corresponding relationship between access paths and components !

• How to determine the corresponding relationship between access paths and components? routing

2. Introduction to routing

Routing in life: mapping relationship between devices and IP

Routing in Vue: mapping relationship between paths and components

3. Basic use of routing

1. Goal

Understand the plug-in VueRouter and master the basic steps of using VueRouter

2. Function

When modifying the address bar path, switch to display matching components

3.Description

An official routing plug-in for Vue, which is a third-party package

4.Official website

https://v3.router.vuejs.org/zh/

5.Usage of VueRouter (5+2)

Fixed 5 fixed steps (no need to memorize, practice makes perfect)

1. Download the VueRouter module to the current project, version 3.6.5

   yarn add [email protected]
   

2. main.jsIntroduce VueRouter into

   import VueRouter from 'vue-router'
   

3. Installation and registration

   Vue.use(VueRouter)
   

4. Create routing object

   const router = new VueRouter()
   

5. Injection, inject the routing object into the new Vue instance and establish the association

   new Vue({
         
         
     render: h => h(App),
     router:router
   }).$mount('#app')
   
   

After we configure the above 5 steps, you can see that the routing in the browser address bar changes to /#/the form. Indicates that the route of the project has been managed by Vue-Router

6.Code examples

main.js

// 路由的使用步骤 5 + 2
// 5个基础步骤
// 1. 下载 v3.6.5
// yarn add [email protected]
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象
// 5. 注入到new Vue中，建立关联


import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

const router = new VueRouter()

new Vue({
    
    
  render: h => h(App),
  router
}).$mount('#app')

7. Two core steps

1. Create the required components (views directory) and configure routing rules

   

2. Configure navigation and configure routing exits (the location where components matching the path are displayed)

app.vue

<div class="footer_wrap">
  <a href="#/find">发现音乐</a>
  <a href="#/my">我的音乐</a>
  <a href="#/friend">朋友</a>
</div>
<div class="top">
  <router-view></router-view>
</div>

4. Issues with component storage directories

Note: .vue files are essentially the same

1. Component classification

.vueFiles are divided into 2 categories, both are .vue files (essentially no difference)

• Page components (components used when configuring routing rules)
• Reuse components (components used in multiple components)

2. Storage directory

The purpose of classification is to make it easier to maintain

1. src/views folder

   Page component - page display - used with routing

2. src/components folder

   Reuse components - display data - often used for reuse

5. Route encapsulation and extraction

Question: Are all routing configurations main.jsappropriate?
Goal: Extract the routing module. Benefits: Splitting modules facilitates maintenance

Path abbreviation:

In the scaffolding environment, @ it refers to the src directory, which can be used to quickly introduce components