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 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166
| <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app">
</div> <script src="https://mirrors.idiyrom.com/web/js/vue.mini.js"></script> <script src="https://mirrors.idiyrom.com/web/js/vue-router.js"></script> <script src="https://mirrors.idiyrom.com/web/js/jquery.min.js"></script> <script> const Home = { data() { return {
} }, template: `<div>我是首页</div>` }; const Course = { data() { return { categoryList: [] } }, template: ` <div> <span v-for="(item, index) in categoryList" :key="index"> {{ item.name }} </span> </div>`, methods: { getCategroyList() { $.ajax({ url: 'https://vue.ropon.top/api/v1/course_sub/category/list/', type: 'get', success: (data) => { if (data.error_no === 0) { var data = data.data; let obj = { id: 0, name: "全部", category: 0 }; this.categoryList = data; this.categoryList.unshift(obj); console.log(this.categoryList); } }, error: function (err) { console.log(err); } }); } }, created() { console.log("ceshi"); this.getCategroyList(); } };
//动态路由模式: // https://vue.ropon.top/user/1 params // https://vue.ropon.top/user/2 // https://vue.ropon.top/user?user_id=1 query const User = { data() { return { user_id: null } }, template: `<div> 我是用户:{{ user_id }} <button @click="clickHandler">跳转首页</button> </div>`, created() { this.user_id = this.$route.params.id; }, watch: { "$route": function(to, from) { this.user_id = to.params.id; console.log(from); } }, methods: { clickHandler() { // 编程式的导航 this.$router.push({ name: "Home" }) } } };
// 创建路由 const router = new VueRouter({ //定义路由规则 // mode: "history", routes: [ { path: "/", redirect: "/home", }, { path: "/home", name: "Home", component: Home }, { path: "/course", name: "Course", component: Course }, { path: "/user/:id", name: "User", component: User } ] });
let App = { data() { return {
} }, //router-link和router-view是vue-router提供的两个全局组件 //router-view 是路由组件的出口 //router-link默认会渲染成a标签,to属性默认被渲染成href
// <router-link :to="{name: 'User', params: {id: 1}}">用户1</router-link> // <router-link :to="{name: 'User', params: {id: 2}}">用户2</router-link> template: ` <div> <div class="header"> <router-link :to="{name: 'Home'}">首页</router-link> <router-link :to="{name: 'Course'}">免费课程</router-link> <router-link :to="{name: 'User', params: {id: 1}}">用户1</router-link> <router-link :to="{name: 'User', params: {id: 2}}">用户2</router-link>
</div> <router-view></router-view> </div>` }; new Vue({ el: '#app', //挂载 路由对象 router, data() { return {
} }, template: `<App></App>`, components: { App } }); </script> </body> </html>
|