Vue - Router 路由

時間 2019-12-14

原文原文鏈接

路由的註冊

 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。