Article directory
The focus of this series of notes will be on how to use Vue3 to set up the project and interact with the back-end API. It will not introduce the basic features of Vue. For the basic features of Vue, you can refer to this video for four hours to quickly get you started with Vue . I just read this entry, and I think it's not bad.
Code address: https://github.com/yexia553/vue_study/tree/%E9%85%8D%E7%BD%AEvue-router/vue3-notes
Also published on my personal site: http://panzhixiang.cn/article/2022/10/17/56.html
A brief introduction to routing
Both the front-end and the back-end have the concept of routing, which can be simply understood in this way: Routing is a mark that points to different pages or functions.
For example, after running the vue3 project locally, you can open the address http://localhost:5173/ through the browser. The last slash / of this local address is actually a route, which is generally called a root route. Vue3 will browse The browser boots to the default home page of vue3.
For example, /guide/essentials/ in https://cn.vuejs.org/guide/essentials/application.html is also a route, which will point users to a fixed page.
vue-router
Vue-router is the routing tool officially recommended by vue. There are two versions, v3 and v4. 3 is used with vue2, and 4 is used with vue3. We use the v4 version.
Install vue-router
Installation is very simple, just one command
npm install vue-router
Create router configuration code
Create a router directory under the src directory, and then create an index.js file in the router directory. You can check whether the directory structure is correct against the code in the link at the beginning.
Write the following code in index.js:
import {
createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'main',
component: () => import('../views/home/Home.vue'),
},
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
In fact, most of the above code structure is formatted, mainly to explain the content in routes.
routes is a list,
the elements in the list are dictionaries,
the value of path is the route, in the sample code it is the root route, the
value of name is an alias for this route,
the value of component is the page file pointed to by this route, This points to Home.vue (not created yet)
Create page file
The above route points to a Home.vue, but we haven't created this file yet, let's create it now.
First, create a views directory under the src directory, where all our page files will be placed;
create a home directory in views to place the page files of the home page, and
create Home.vue in the home directory, the content is as follows.
<template>
Home
</template>
The content of Home.vue is very simple, the function is to display a Home string on the page
Bind router to vue instance
It is not enough to have a router and the corresponding page file, because it has not been associated with vue, so vue cannot recognize the route specified in router. So the next thing we have to do is to associate router with vue.
- Modify App.vue
As mentioned in the previous note, App.vue is equivalent to a root component. All pages in vue will go through App.vue first when refreshing, so if you want router to take effect in vue, you must It should also be configured in App.vue. Delete all the original content in App.vue and replace it with the following code:
<template>
<router-view></router-view>
</template>
- Modifying main.js
is also mentioned in the previous note. main.js is equivalent to the startup entry of the vue application. Some global configurations are often placed here, and vue-router must be placed in main.js to follow The start of vue is loaded together, and the modified main.js is as follows:
import {
createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'
import './assets/main.css'
const app = createApp(App)
app.use(router)
app.mount('#app')
This modification actually only does one thing, which is to introduce router in main.js, and then bind it to app.
At this point, vue-router has been configured, execute it under the vue3-notes path npm run dev, and then open http://localhost:5173/#/ in the browser, and a Home string should be displayed on the page.
As for why the above address is http://localhost:5173/#/ instead of http://localhost:5173/, this is determined by a piece of code in src/router/index.js, which we have given to history The value is createWebHashHistory(), so the address ends with "/#/" instead of "/". The reason is to ask everyone to read the vue-router documentation by yourself.
const router = createRouter({
history: createWebHashHistory(),
routes
})