Vue - Router 路由 | 易学教程

路由的注册

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="x-ua-compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>Title</title>
 8     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
 9     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
10 </head>
11 <body>
12 <div id="app">
13     <!--<router-link to="/">首页</router-link>-->
14     <!--<router-link to="/login">登录</router-link>-->
15     <router-link :to="{name: 'home'}">首页</router-link>
16     <router-link :to="{name: 'login'}">登录</router-link>
17     <router-link to="/xumingyang?age=77">用户页面</router-link>
18 
19     <router-view></router-view>
20 </div>
21 <script>
22     let url = [
23         {
24             path: "/",
25             name: "home",
26             component: {
27                 template: `<div>
28                             <h1>这是首页</h1>
29                             <h2>首页内容</h2>
30                             </div>
31                             `
32             }
33         },
34         {
35             path: "/login",
36             name: "login",
37             component: {
38                 template: `
39                 <div>
40                     <h1>这是登录页面</h1>
41                 </div>`
42             }
43         },
44         {
45             path: "/:username",
46             name: "user",
47             component: {
48                 template: `<div>
49                         <h1>这是用户页面</h1>
50                         <p>用户名{{$route.params.username}}</p>
51                         <p>年龄{{$route.query.age}}</p>
52                         </div>`
53             }
54         }
55     ];
56 
57     let my_router =  new VueRouter({
58         routes: url,
59     });
60 
61     const app = new Vue({
62         el: "#app",
63         router: my_router,
64         mounted(){
65             // 路由的全部信息
66             console.log(this.$route);
67             console.log(this.$router)
68             console.log(this.$el)
69         }
70     })
71 </script>
72 </body>
73 </html>

子路由的注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <router-link :to="{name: 'home'}">首页</router-link>
        <router-view></router-view>

    </div>
    <script>
        
        let routes = [
            {
                path:"/",
                name:"home",
                redirect:"daien",
                component:{
                    template:`<div>
                        <h1>这是首页</h1>
                        <router-link to="daien">戴恩</router-link>
                        <router-link to="zhangqiangqiang">张强强</router-link>
                        <router-view></router-view>
                    </div>`
                },
                children:[
                    {
                        path:"daien",
                        component:{
                            template:`<div><h1>戴恩</h1></div>`
                        }
                    },
                    {
                        path:"zhangqiangqiang",
                        component:{
                            template:`<div><h1>张强强</h1></div>`
                        }
                    }
                ]
            }
        ];
        let router = new VueRouter({
            routes:routes
        });

        const app = new Vue({
            el:"#app",
            router:router,
        })

    </script>
</body>
</html>

来源：https://www.cnblogs.com/liuafan/p/9871309.html

标签

vue

路由

vue-router