How to use Vue and vue-router to create a single page application
In this article, the editor introduces in detail "how to use Vue and vue-router to create a single-page application". The content is detailed, the steps are clear, and the details are handled properly. I hope this "how to use Vue and vue-router to create a single-page application" article can help you solve your doubts.
Start
It is natural to use Vue and vue-router to create single-page applications. When adding vue-router to the mixer, we have used components to combine our applications. All we need to do is map components to routes so that routes know how to render them. Here is a simple example:
Router-link
Note that we use the custom component router-link to create links instead of using the regular a tag. This allows the Vue router to change the URL without reloading the page, dealing with URL generation and its encoding. We'll see how to benefit from these features later.
Router-view
Router-view displays the components that correspond to url. You can put it anywhere to suit your layout.
Html
First, let's create two pages by src/views:
Home.vue:
Home
Export default {
Name: 'Home'
Data: () = > {
Return {
}
}
}
About.vue:
About
Export default {
Name: 'About'
Data: () = > {
Return {
}
}
}
Add the corresponding route in src/router/index.js:
Import {createRouter, createWebHistory} from 'vue-router'
Const routes = [
{
Path:'/ about'
Name: 'About'
Component: () = > import ('.. / views/About.vue')
Meta: {
Title: 'about'
}
}
{
Path:'/ home'
Name: 'Home'
Component: () = > import ('.. / views/Home.vue')
Meta: {
Title: home page
}
}
]
Const router = createRouter ({
History: createWebHistory (process.env.BASE_URL)
Routes
})
Export default router
Add router-link,router-view to src/App.vue:
Go to Home
Go to About
# app {
Font-family: Avenir, Helvetica, Arial, sans-serif
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
Text-align: center
Color: # 2c3e50
}
# nav {
Padding: 30px
}
# nav a {
Font-weight: bold
Color: # 2c3e50
}
# nav a.router-link-exact-active {
Color: # 42b983
}
Read this, the article "how to use Vue and vue-router to create a single-page application" article has been introduced, want to master the knowledge of this article still need to practice and use to understand, if you want to know more about the article, welcome to follow the industry information channel.
