|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue - Router</title> <style> p { font-family: monospace; white-space: pre-wrap; } </style> </head> <body> <div id="app"> <nav> <router-link to="/">Home</router-link> - <router-link to="/user/1/details">User</router-link> - <router-link to="/about">About</router-link> - <router-link to="/xxx">xxx</router-link> </nav> <router-view></router-view> </div> <script> const Home = { template: '<h2>Home Page</h2><p>{{JSON.stringify($route, null, 4)}}</p>' } const About = { template: '<h2>About Page</h2><p>{{JSON.stringify($route, null, 4)}}</p>' } const NotFound = { template: '<h2>NotFound Page</h2><p>{{JSON.stringify($route, null, 4)}}</p>' } const User = { template: '<h2>User Page</h2><router-view></router-view>' } const UserDetails = { template: '<h3>User Details</h3><p>{{JSON.stringify($route, null, 4)}}</p>' } const router = VueRouter.createRouter({ history: VueRouter.createWebHistory(), routes: [ { path: '/', component: Home }, { path: '/user/:id', component: User, children: [ { path: 'details', component: UserDetails, }, ] }, { path: '/about', component: About }, { path: '/layzy-component', component: () => import('./views/UserDetails') }, { path: '/:pathMatch(.*)', component: NotFound }, ], }) const app = Vue.createApp({}) app.use(router) app.mount("#app") </script> </body> </html> |
vue-router: Basic
Author: admin - Posted: 05/10/22 - Update: 05/11/22
