1 Use Vue Router to develop single-page applications
1.1 Feel the front-end routing
1.1.1 HTML Pages use routing
Step 1: Import vuE-Router through CDN
<! -- Introducing vue-router --><script src="https://unpkg.com/vue-router@next"></script>
Copy the codeStep 2: Set up the navigation links using the router-link component
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<! Vue3 -->
<script src="https://unpkg.com/vue@next"></script>
<! -- Introducing vue-router -->
<script src="https://unpkg.com/vue-router@next"></script>
</head>
<body>
<div id="app">
<p>{{value}}</p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-view />
</div>
<script>
const RouterTest = {
data() {
return {
value: 'This is a routing demo.'}}},const routes = [
{
path: '/'.component: { template: '<p>Home page</p>'}}, {path: "/foo".component: { template: '<p>Foo</p>'}}, {path: "/bar".component: { template: '<p>Bar</p>'}}];const history = VueRouter.createWebHistory();
const router = VueRouter.createRouter({ history, routes });
Vue.createApp(RouterTest).use(router).mount('#app')
</script>
</body>
</html>
Copy the codeThe to attribute specifies the URL of the link. The
tag is rendered as a
tag by default. The
tag can be fully customized using the V-slot API.
Step 3: Specify where the component is rendered, in this case by<router-view>The specified
<router-view></router-view>
Copy the codeStep 4: Define the routing components
(Integrated to step 2)
Step 5: Define the route and map the URL to the component
(Integrated to step 2)
Step 6: Create an instance of VueRouter and pass in the routing configuration
(Integrated to step 2)
Step 7: Make the entire application routable by calling the Use () method of the Vue instance and passing in the Router object
(Integrated to step 2)
Step 8: Run results
1.1.2 Modular Development uses routing
This demo is based on vuE-CLI-generated vUE project scaffolding, created with vue-Router dependencies imported (recommended)!
Step 1: Install vue-router using NPM
This step can be omitted if the VUE-Router dependency is imported when using vue-CLI-generated vUE project scaffolding!
npm install vue-router@next --save
Copy the codeStep 2: Use it in app.vue<router-view />
<template>
<router-view />
</template>
<style lang="scss">
</style>
Copy the codeStep 3: Create the component Study and set the navigation links and the location of the component rendering
<template> <router-link to="/"> Home </router-link> <router-link to="/news"> News </router-link> <router-link Books to = "/ books" > < / router - the link > < the router - link to = "/ videos" > video < / router - the link > < div > = = = = = = = = = = = = = = = = = < / div > < the router - view / > </template> <script> export default { el: 'Study' } </script> <style> </style>Copy the codeStep 4: Create Home, News, Books, Videos
Here’s an example of the basics
<template> <div> </template> <script> export default {} </script> <style> </style>Copy the codeStep 5: Modify the index.js file in the Router folder
Note about route nesting:
1, the following and route navigation and secondary route navigation;
2. The first-level route navigation works in
under app. vue, and the second-level route navigation works in
under study. vue. 3. All first-level route navigation can be displayed on app. vue, and each second-level route can be displayed on its corresponding and routing page;
4, in fact, this is only used to demonstrate the route jump, there is no need to use route nesting, but this can make the running results more intuitive display of the jump change!
import { createRouter, createWebHashHistory } from 'vue-router'
import Study from '.. /views/Study.vue'
import Home from '.. /views/Home.vue'
import News from '.. /views/News.vue'
import Books from '.. /views/Books.vue'
import Videos from '.. /views/Videos.vue'
const routes = [
{
path: '/'.component: Study,
redirect: '/home'.children: [{path: '/home'.component: Home
}, {
path: '/news'.component: News
}, {
path: '/books'.component: Books
}, {
path: '/videos'.component: Videos
}
]
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
Copy the codeStep 6: View the main.js file
Only used to show code content
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')
Copy the code
