Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.