Vue3 - front-end routing

Ask for three consecutive connections with one click

I hope you will like, follow and collect if you find it useful after reading this. Thank you! ! !

Preface

From this perspective, it feels easy to understand the separation of front and rear ends, and many things will become clearer.

The development history of front-end routing

There is a historical relationship
: back-end routing - separation of front-end and back-end - front-end routing (single page rich application (SPA))



(the previous one was called MPA, and the single page that appeared later was called SPA)

What is front-end routing:

The front-end maintains the mapping relationship. Different URLs display different components.
To grasp the essence, it is to map different components to different URLs for display.

Two ways to implement front-end routing

Hash of the first URL

The history of the second H5

vue-router

Create steps

1.创建一个js文件(命名为index.js)配置路由信息，这个文件放在router文件夹里，然后导入到main.js中（注册）
	import router from './router' + createApp(App).use(router).mount('#app')
	别忘了在index.js（路由文件）导出router（路由对象）  export default router

2.在路由文件中导入要使用的路由函数，例如：
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'

3.创建路由const router = createRouter（ { }） 记住里面是一个路由对象，所以写法都是键值对写法，导出的router就是这个router对象

4.在 createRouter（ { } ）中指定采用的模式: hash/history
 history: createWebHashHistory() 或者 history: createWebHistory()

5.在 createRouter（  { }）中配置路由映射关系(都是放在一个数组里面的)
	routes: [ {
	path: "/home", 
    component: () => import("../Views/Home.vue"),（这里是我们自己写好的组件）
   }]  
	routes:[ ] 因为是路由映射表，所以采用数组的形式，里面放的是对象，采用键值对，一个是路径，一个是组件
	特别注意的是，在组件这里我们直接采用函数导入组件，这样在webpack中就会分包进行打包，而不是全都打包到app.js中。
	现在都是这个方式，所以最好都采用这个方式去写。
	
6.路由配置完之后在app.vue里面使用router-link来实现路由跳转，注意to属性和replace属性
  但是注意要别忘了使用router-view进行占位，写在组件想要渲染的地方,等组件跳转过来就渲染
  区分link和view，link默认是一个a超链接，只是负责实现路由跳转，但是view是实际跳转后组件实现所放的位置。
  两者缺一不可。

Remember that router-link and router-view cannot be separated, because the jump of router-link requires view to choose where to place it. If there is no view, it cannot be displayed.

---

some details

redirect: redirect

Some websites don’t like hash mode and don’t like to see #, so history mode is more common.

The replace (replace) jump will not be recorded in the history, so click return <-, it will not return, it will return to the browser homepage,
so don't use replace, make an understanding

router-link

The last two are css after debugging selection (the last one can be named by yourself)

Lazy loading of routes (subcontracting)

How to do it? Like asynchronous components, using the arrow function to import the function will subcontract (the previous comment is the name of the subcontract) and it will not be subcontracted by default.

Route other attributes (name meta)

can be seen on the url

Dynamic routing (mastery)

The user ID is different and the page is different, so the path cannot be hard-coded. The path is dynamic, so it is a dynamic routing.

When obtaining the ID of dynamic routing,

you can also see a feature of the compositions API, that is, hooks are used to return an object (variable).

At the same time, route.params stores routing-related information.

---

NotFound(mastery)

For unmatched paths, you need to configure an unmatched component prompt (create it yourself). This is more user-friendly. Note that the
path must be written like that so that all unmatched ones will display this.

Get the parameters and do more explanations.

Add * to get an array

There are too many knowledge points, and you need to practice these codes.

Programmatic navigation

Also perform jump processing for other elements except vue-router

The difference between direct push and push+path is that path can pass more parameters.

The role of meta corresponding to query

---

Page forward and backward

It is to realize forward and backward on the page.

One discovery here is that uesRouter() is used a lot. Remember this method and use the router to get it before using it.

Route nesting (mastery)

The main thing is the use of router-view. Be sure to remember that it is used to occupy space.

1. Nested routing must be configured in the routing configuration file (with redirection added)

2. Then write the nested routing configuration (router-link+router-view) in the home component

A project from the teacher:

Dynamically add routes (advanced addRoute)

It is mainly for practical application scenarios. For example, it is divided into administrators and ordinary users. Many pages cannot be seen by ordinary users and can only be viewed by administrators. Therefore, this route cannot be hard-coded in the router and needs to be confirmed and managed. You can dynamically add routes after you have become a member (only you have permission to access).

Routes can be added dynamically in vue files

Remove a route (Learn about removeRoute)

Route Navigation Guard (Advanced)

Logic: It needs to be judged whether to enter the order page. The processing here is called routing navigation guard (interception)

guard: guard

Before any route jump is made, the function in beforeEach passed in will be called back

When intercepting, the judgment statement cannot be missing, otherwise the jump will be called recursively and cannot be displayed. That is, there will be no jump interception after the jump to login.

The key is to determine whether the user is logged in: localStorage saves the token.
Determine whether there is a token. If not (then there is no login) and it is not on the login page, then jump to the login page. If you are already logged in, it will not be intercepted.

Login logic: After clicking login, save the token and then jump to the corresponding page.

–

Navigation Guard official website introduction

Navigation analysis process (understanding)

It's enough to understand it. It's actually not very useful. Just check it if you need to.