路由的注册
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>
