41、vue-router之路由参数的随意设置与伪静态链接地址处理：
访问路径：你的加上#/content/1
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue-router之路由参数的随意设置与伪静态链接地址处理</title> 6 <script src="./lib/vue.js"></script> 7 <script src="./lib/vue-router.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <!-- 12 router-link: 定义路由的链接的标签 13 to: 定义跳转到那个组件 14 router-view：展示组件的标签 15 --> 16 <router-link to="/content">内容</router-link> 17 <router-view></router-view> 18 </div> 19 <script type="text/x-template" id="content"> 20 <div> 21 id:{{$route.params.id}} 22 <br /> 23 <button @click="show">检测参数</button> 24 </div> 25 </script> 26 </body> 27 <script> 28 // 定义组件 29 const content = { 30 template: "#content", 31 methods: { 32 show() { 33 /*this.$route.params)：获取路由传过来的变量（所有变量）*/ 34 console.log(this.$route.params); 35 /*获取名为cid的变脸*/ 36 // console.log(this.$route.params.cid); 37 } 38 } 39 }; 40 //定义路由器，然后把组件交给路由器 41 let routes = [ 42 /*:cid :定义了一个名为cid的变量*/ 43 {path: '/content/:id', component: content} 44 ]; 45 46 //routes:routes可以写成routes 47 // let router = new VueRouter({routes:routes}); 48 let router = new VueRouter({routes}); 49 new Vue({ 50 el: '#app', 51 //把路由器注入主组件中，这样才有效果 52 /* 53 * 注意：router 与 routes 的区别： 54 * router 是一个机制，相当于一个管理者，它来管理路由。 55 * routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。 56 * route，它是一条路由。 57 * */ 58 //如果 router的名称和router的一样可以直接写成 router 即可 59 // router: router 60 router 61 }) 62 </script> 63 </html>
42、vue-router之路由参数的验证处理保存路由安全：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue-router之路由参数的验证处理保存路由安全</title> 6 <script src="./lib/vue.js"></script> 7 <script src="./lib/vue-router.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <!-- 12 router-link: 定义路由的链接的标签 13 to: 定义跳转到那个组件 14 router-view：展示组件的标签 15 --> 16 <router-link to="/content">内容</router-link> 17 <router-view></router-view> 18 </div> 19 <script type="text/x-template" id="content"> 20 <div> 21 id:{{$route.params.id}} 22 <br /> 23 <button @click="show">检测参数</button> 24 </div> 25 </script> 26 </body> 27 <script> 28 // 定义组件 29 const content = { 30 template: "#content", 31 methods: { 32 show() { 33 /*this.$route.params)：获取路由传过来的变量（所有变量）*/ 34 console.log(this.$route.params); 35 /*获取名为cid的变脸*/ 36 // console.log(this.$route.params.cid); 37 } 38 } 39 }; 40 //定义路由器，然后把组件交给路由器 41 let routes = [ 42 /*:id :定义了一个名为id的变量*/ 43 /*:id(ad{2}) :表示必须以a开头包含两位数字，比如：a23 */ 44 {path: '/content/:id(a\d{2})', component: content} 45 ]; 46 47 //routes:routes可以写成routes 48 // let router = new VueRouter({routes:routes}); 49 let router = new VueRouter({routes}); 50 new Vue({ 51 el: '#app', 52 //把路由器注入主组件中，这样才有效果 53 /* 54 * 注意：router 与 routes 的区别： 55 * router 是一个机制，相当于一个管理者，它来管理路由。 56 * routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。 57 * route，它是一条路由。 58 * */ 59 //如果 router的名称和router的一样可以直接写成 router 即可 60 // router: router 61 router 62 }) 63 </script> 64 </html>
43、vue-router之路由参数默认值的设置技巧：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue-router之路由参数默认值的设置技巧</title> 6 <script src="./lib/vue.js"></script> 7 <script src="./lib/vue-router.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <!-- 12 router-link: 定义路由的链接的标签 13 to: 定义跳转到那个组件 14 router-view：展示组件的标签 15 --> 16 <router-link to="/content">内容</router-link> 17 <router-view></router-view> 18 </div> 19 <script type="text/x-template" id="content"> 20 <div> 21 id:{{id}} 22 <br /> 23 <button @click="show">检测参数</button> 24 </div> 25 </script> 26 </body> 27 <script> 28 // 定义组件 29 const content = { 30 template: "#content", 31 /*子组件的data是一个匿名函数*/ 32 data() { 33 return { 34 id: 0 35 } 36 }, 37 /* 38 * mounted钩子函数的调用时机： 39 * 编译好的HTML挂载到页面完成后执行的事件钩子，此钩子函数中一般会 40 * 做一些ajax请求获取数据来进行数据初始化 41 * 注意：mounted在整个实例中只执行一次 42 * */ 43 mounted() { 44 this.id = this.$route.params.id; 45 if (!this.id) { 46 this.id = 1; 47 } 48 }, 49 methods: { 50 show() { 51 /*this.$route.params)：获取路由传过来的变量（所有变量）*/ 52 console.log(this.$route.params); 53 /*获取名为cid的变脸*/ 54 // console.log(this.$route.params.cid); 55 } 56 } 57 }; 58 //定义路由器，然后把组件交给路由器 59 let routes = [ 60 /*:id :定义了一个名为id的变量*/ 61 /*? :表示匹配一个整数或者0个*/ 62 {path: '/content/:id?', component: content} 63 ]; 64 65 //routes:routes可以写成routes 66 // let router = new VueRouter({routes:routes}); 67 let router = new VueRouter({routes}); 68 new Vue({ 69 el: '#app', 70 //把路由器注入主组件中，这样才有效果 71 /* 72 * 注意：router 与 routes 的区别： 73 * router 是一个机制，相当于一个管理者，它来管理路由。 74 * routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。 75 * route，它是一条路由。 76 * */ 77 //如果 router的名称和router的一样可以直接写成 router 即可 78 // router: router 79 router 80 }) 81 </script> 82 </html>
44、vue-router之实例操作新闻列表单页面应用与路由别名：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue-router之实例操作新闻列表单页面应用与路由别名</title> 6 <script src="./lib/vue.js"></script> 7 <script src="./lib/vue-router.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <router-view></router-view> 12 </div> 13 <script type="text/x-template" id="home"> 14 <div> 15 <li v-for="v in news"> 16 <!--只要要绑定变量，都可用v-bind: 简写 ：--> 17 <!-- 18 name:'content':指定名为 content的路由，即'/content/:id' 19 params:{id:v.id}}:作用是赋值给路由中的 :id 变量 20 --> 21 <router-link :to="{name:'content',params:{id:v.id}}">{{v.title}}</router-link> 22 </li> 23 </div> 24 </script> 25 <script type="text/x-template" id="content"> 26 <div> 27 <li>{{field.title}} - {{field.id}}</li> 28 <p> 29 {{field.content}} 30 </p> 31 <!-- 32 router-link: 定义路由的链接的标签 33 to: 定义跳转到那个组件 34 router-view：展示组件的标签 35 --> 36 <router-link to="/">返回首页</router-link> 37 </div> 38 </script> 39 </body> 40 <script> 41 const data = [ 42 {id:1,title:'PHP开源免费框架',content:'这是PHP的内容...'}, 43 {id:2,title:'CMS开源免费框架',content:'这是CMS的内容...'} 44 ]; 45 // 定义组件 46 const home = { 47 template: "#home", 48 /*子组件的data是一个匿名函数*/ 49 data() { 50 return { 51 news: data 52 } 53 } 54 }; 55 const content = { 56 template: "#content", 57 /*子组件的data是一个匿名函数*/ 58 data() { 59 return { 60 field:{} 61 } 62 }, 63 /* 64 * mounted钩子函数的调用时机： 65 * 编译好的HTML挂载到页面完成后执行的事件钩子，此钩子函数中一般会 66 * 做一些ajax请求获取数据来进行数据初始化 67 * 注意：mounted在整个实例中只执行一次 68 * */ 69 mounted() { 70 let id = this.$route.params.id; 71 for (let k=0;k<data.length;k++) { 72 if (data[k].id===id) { 73 this.field = data[k]; 74 } 75 } 76 } 77 }; 78 //定义路由器，然后把组件交给路由器 79 let routes = [ 80 /*:id :定义了一个名为id的变量*/ 81 /*路由带有变量的时候给路由一个名称，便于后面的调用*/ 82 {path: '/content/:id', component: content,name:'content'}, 83 {path: '/', component: home} 84 ]; 85 86 //routes:routes可以写成routes 87 // let router = new VueRouter({routes:routes}); 88 let router = new VueRouter({routes}); 89 new Vue({ 90 el: '#app', 91 //把路由器注入主组件中，这样才有效果 92 /* 93 * 注意：router 与 routes 的区别： 94 * router 是一个机制，相当于一个管理者，它来管理路由。 95 * routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。 96 * route，它是一条路由。 97 * */ 98 //如果 router的名称和router的一样可以直接写成 router 即可 99 // router: router 100 router 101 }) 102 </script> 103 </html>
45、vue-router之路由嵌套在文章系统中的使用方法：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue-router之路由嵌套在文章系统中的使用方法</title> 6 <script src="./lib/vue.js"></script> 7 <script src="./lib/vue-router.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <router-view></router-view> 12 </div> 13 <script type="text/x-template" id="home"> 14 <div> 15 <li v-for="v in news"> 16 <!--只要要绑定变量，都可用v-bind: 简写 ：--> 17 <!-- 18 name:'content':指定名为 content的路由，即'/content/:id' 19 params:{id:v.id}}:作用是赋值给路由中的 :id 变量 20 --> 21 <router-link :to="{name:'content',params:{id:v.id}}">{{v.title}}</router-link> 22 </li> 23 <!--展示其子路由的页面--> 24 <router-view></router-view> 25 </div> 26 </script> 27 <script type="text/x-template" id="content"> 28 <div> 29 <li>{{field.title}} - {{field.id}}</li> 30 <p> 31 {{field.content}} 32 </p> 33 <!-- 34 router-link: 定义路由的链接的标签 35 to: 定义跳转到那个组件 36 router-view：展示组件的标签 37 --> 38 <router-link to="/">返回首页</router-link> 39 </div> 40 </script> 41 </body> 42 <script> 43 const data = [ 44 {id:1,title:'PHP开源免费框架',content:'这是PHP的内容...'}, 45 {id:2,title:'CMS开源免费框架',content:'这是CMS的内容...'} 46 ]; 47 // 定义组件 48 const home = { 49 template: "#home", 50 /*子组件的data是一个匿名函数*/ 51 data() { 52 return { 53 news: data 54 } 55 } 56 }; 57 const content = { 58 template: "#content", 59 /*子组件的data是一个匿名函数*/ 60 data() { 61 return { 62 field:{} 63 } 64 }, 65 /* 66 * mounted钩子函数的调用时机： 67 * 编译好的HTML挂载到页面完成后执行的事件钩子，此钩子函数中一般会 68 * 做一些ajax请求获取数据来进行数据初始化 69 * 注意：mounted在整个实例中只执行一次 70 * */ 71 mounted() { 72 let id = this.$route.params.id; 73 for (let k=0;k<data.length;k++) { 74 if (data[k].id===id) { 75 this.field = data[k]; 76 } 77 } 78 } 79 }; 80 //定义路由器，然后把组件交给路由器 81 let routes = [ 82 /*:id :定义了一个名为id的变量*/ 83 /*路由带有变量的时候给路由一个名称，便于后面的调用*/ 84 /*children:定义home的子路由*/ 85 {path: '/', component: home,children:[ 86 {path: '/content/:id', component: content,name:'content'} 87 ]} 88 ]; 89 90 //routes:routes可以写成routes 91 // let router = new VueRouter({routes:routes}); 92 let router = new VueRouter({routes}); 93 new Vue({ 94 el: '#app', 95 //把路由器注入主组件中，这样才有效果 96 /* 97 * 注意：router 与 routes 的区别： 98 * router 是一个机制，相当于一个管理者，它来管理路由。 99 * routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。 100 * route，它是一条路由。 101 * */ 102 //如果 router的名称和router的一样可以直接写成 router 即可 103 // router: router 104 router 105 }) 106 </script> 107 </html>
46、vue-router之使用watch与mounted解决同一组件页面不刷新数据的问题：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue-router之使用watch与mounted解决同一组件页面不刷新数据的问题</title> 6 <script src="./lib/vue.js"></script> 7 <script src="./lib/vue-router.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <router-view></router-view> 12 </div> 13 <script type="text/x-template" id="home"> 14 <div> 15 <li v-for="v in news"> 16 <!--只要要绑定变量，都可用v-bind: 简写 ：--> 17 <!-- 18 name:'content':指定名为 content的路由，即'/content/:id' 19 params:{id:v.id}}:作用是赋值给路由中的 :id 变量 20 --> 21 <router-link :to="{name:'content',params:{id:v.id}}">{{v.title}}</router-link> 22 </li> 23 <!--展示其子路由的页面--> 24 <router-view></router-view> 25 </div> 26 </script> 27 <script type="text/x-template" id="content"> 28 <div> 29 <li>{{field.title}} - {{field.id}}</li> 30 <p> 31 {{field.content}} 32 </p> 33 <!-- 34 router-link: 定义路由的链接的标签 35 to: 定义跳转到那个组件 36 router-view：展示组件的标签 37 --> 38 <router-link to="/">返回首页</router-link> 39 </div> 40 </script> 41 </body> 42 <script> 43 const data = [ 44 {id:1,title:'PHP开源免费框架',content:'这是PHP的内容...'}, 45 {id:2,title:'CMS开源免费框架',content:'这是CMS的内容...'} 46 ]; 47 // 定义组件 48 const home = { 49 template: "#home", 50 /*子组件的data是一个匿名函数*/ 51 data() { 52 return { 53 news: data 54 } 55 } 56 }; 57 const content = { 58 template: "#content", 59 /*子组件的data是一个匿名函数*/ 60 data() { 61 return { 62 field:{} 63 } 64 }, 65 /* 66 * 用 watch 来监听路由，只要路由发生改变就重新加载 content 组件的内容 67 * */ 68 watch: { 69 '$route'(to,from) { 70 this.load(); 71 } 72 }, 73 /* 74 * mounted钩子函数的调用时机： 75 * 编译好的HTML挂载到页面完成后执行的事件钩子，此钩子函数中一般会 76 * 做一些ajax请求获取数据来进行数据初始化 77 * 注意：mounted在整个实例中只执行一次 78 * */ 79 /* 80 * mounted的内容只在组件加载完的时候执行一次，也就是同一个组件只执行一次，不管页面后面的数据改不改变 81 * */ 82 mounted() { 83 this.load(); 84 }, 85 methods: { 86 load() { 87 let id = this.$route.params.id; 88 for (let k=0;k<data.length;k++) { 89 if (data[k].id===id) { 90 this.field = data[k]; 91 } 92 } 93 } 94 } 95 }; 96 //定义路由器，然后把组件交给路由器 97 let routes = [ 98 /*:id :定义了一个名为id的变量*/ 99 /*路由带有变量的时候给路由一个名称，便于后面的调用*/ 100 /*children:定义home的子路由*/ 101 {path: '/', component: home,children:[ 102 {path: '/content/:id', component: content,name:'content'} 103 ]} 104 ]; 105 106 //routes:routes可以写成routes 107 // let router = new VueRouter({routes:routes}); 108 let router = new VueRouter({routes}); 109 new Vue({ 110 el: '#app', 111 //把路由器注入主组件中，这样才有效果 112 /* 113 * 注意：router 与 routes 的区别： 114 * router 是一个机制，相当于一个管理者，它来管理路由。 115 * routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。 116 * route，它是一条路由。 117 * */ 118 //如果 router的名称和router的一样可以直接写成 router 即可 119 // router: router 120 router 121 }) 122 </script> 123 </html>
47、vue-router之通过程序控制路由的跳转：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue-router之通过程序控制路由的跳转</title> 6 <script src="./lib/vue.js"></script> 7 <script src="./lib/vue-router.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <router-view></router-view> 12 </div> 13 <script type="text/x-template" id="home"> 14 <div> 15 <li v-for="v in news"> 16 <!--只要要绑定变量，都可用v-bind: 简写 ：--> 17 <!-- 18 .prevent: 阻止 a 标签的默认跳转行为 19 --> 20 <a href="" @click.prevent="go(v.id)">{{v.title}}</a> 21 </li> 22 </div> 23 </script> 24 <script type="text/x-template" id="content"> 25 <div> 26 <li>{{field.title}} - {{field.id}}</li> 27 <p> 28 {{field.content}} 29 </p> 30 <a href="" @click.prevent="back()">返回</a> 31 </div> 32 </script> 33 </body> 34 <script> 35 const data = [ 36 {id: 1, title: 'PHP开源免费框架', content: '这是PHP的内容...'}, 37 {id: 2, title: 'CMS开源免费框架', content: '这是CMS的内容...'} 38 ]; 39 // 定义组件 40 const home = { 41 template: "#home", 42 /*子组件的data是一个匿名函数*/ 43 data() { 44 return { 45 news: data 46 } 47 }, 48 methods: { 49 go(id) { 50 //第一种传路径的方式 51 //const url = "/content/" + id; 52 //第二种传路径的方式 53 // const url = {path:'/content/'+id}; 54 //第三种传路径的方式 55 const url = {name:'content',params:{id:id}}; 56 /* 57 * $route：获取参数用的 58 * $router：设置路由用的 59 * */ 60 //push会保存历史记录 61 this.$router.push(url); 62 //replace会替换掉当前的路径 63 // this.$router.replace(url); 64 } 65 } 66 }; 67 const content = { 68 template: "#content", 69 /*子组件的data是一个匿名函数*/ 70 data() { 71 return { 72 field: {} 73 } 74 }, 75 /* 76 * 用 watch 来监听路由，只要路由发生改变就重新加载 content 组件的内容 77 * */ 78 watch: { 79 '$route'(to, from) { 80 this.load(); 81 } 82 }, 83 /* 84 * mounted钩子函数的调用时机： 85 * 编译好的HTML挂载到页面完成后执行的事件钩子，此钩子函数中一般会 86 * 做一些ajax请求获取数据来进行数据初始化 87 * 注意：mounted在整个实例中只执行一次 88 * */ 89 /* 90 * mounted的内容只在组件加载完的时候执行一次，也就是同一个组件只执行一次，不管页面后面的数据改不改变 91 * */ 92 mounted() { 93 this.load(); 94 }, 95 methods: { 96 load() { 97 let id = this.$route.params.id; 98 for (let k = 0; k < data.length; k++) { 99 if (data[k].id == id) { 100 this.field = data[k]; 101 } 102 } 103 }, 104 back() { 105 /* 106 * 如果这里使用了this.$router.go(-1)，则上面的路由跳转 107 * 就不能使用this.$router.replace(url)，因为这个是替换掉路径的，没有历史记录 108 * */ 109 /*go(-1): 返回上一页去*/ 110 this.$router.go(-1); 111 } 112 } 113 }; 114 //定义路由器，然后把组件交给路由器 115 let routes = [ 116 /*:id :定义了一个名为id的变量*/ 117 /*路由带有变量的时候给路由一个名称，便于后面的调用*/ 118 {path: '/', component: home}, 119 {path: '/content/:id', component: content, name: 'content'} 120 ]; 121 122 //routes:routes可以写成routes 123 // let router = new VueRouter({routes:routes}); 124 let router = new VueRouter({routes}); 125 new Vue({ 126 el: '#app', 127 //把路由器注入主组件中，这样才有效果 128 /* 129 * 注意：router 与 routes 的区别： 130 * router 是一个机制，相当于一个管理者，它来管理路由。 131 * routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。 132 * route，它是一条路由。 133 * */ 134 //如果 router的名称和router的一样可以直接写成 router 即可 135 // router: router 136 router 137 }) 138 </script> 139 </html>
48、vue-router之命名视图的实例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue-router之命名视图的实例</title> 6 <style> 7 .menu { 8 border: solid 2px red; 9 background: aqua; 10 padding: 100px; 11 display: block; 12 } 13 .news { 14 border: solid 2px green; 15 background: orange; 16 padding: 50px; 17 float: left; 18 width: 36.3%; 19 } 20 .slide { 21 border: solid 2px gold; 22 background: blueviolet; 23 padding: 50px; 24 float: right; 25 width: 50%; 26 } 27 </style> 28 <script src="./lib/vue.js"></script> 29 <script src="./lib/vue-router.js"></script> 30 </head> 31 <body> 32 <div id="app"> 33 <router-view></router-view> 34 <router-view name="news"></router-view> 35 <router-view name="slide"></router-view> 36 </div> 37 <script type="text/x-template" id="menu"> 38 <div class="menu"> 39 <a href="http://www.baidu.com">百度</a> 40 <a href="https://www.cnblogs.com/chenjianbo/p/9866312.html">Mounted函数</a> 41 </div> 42 </script> 43 <script type="text/x-template" id="news"> 44 <div class="news"> 45 <li v-for="v in news">{{v.title}}</li> 46 </div> 47 </script> 48 <script type="text/x-template" id="slide"> 49 <div class="slide"> 50 <li v-for="v in data">{{v.title}}</li> 51 </div> 52 </script> 53 </body> 54 <script> 55 // 定义组件 56 const menu = { 57 template: "#menu" 58 }; 59 const news = { 60 template: "#news", 61 data() { 62 return { 63 news: [ 64 {title:'数学分析'}, 65 {title:'高等代数'}, 66 {title:'数据模型'} 67 ] 68 } 69 } 70 }; 71 const slide = { 72 template: "#slide", 73 data() { 74 return { 75 data: [ 76 {title: '今日新闻'}, 77 {title: '最新新闻'}, 78 {title: '昨日新闻'} 79 ] 80 } 81 } 82 }; 83 //定义路由器，然后把组件交给路由器 84 let routes = [ 85 { 86 /* 87 * 在根路径下定义子组件使用 components 定义多个 88 * */ 89 path:'/',components: { 90 default: menu, 91 news: news, 92 slide: slide 93 } 94 } 95 ]; 96 97 //routes:routes可以写成routes 98 // let router = new VueRouter({routes:routes}); 99 let router = new VueRouter({routes}); 100 new Vue({ 101 el: '#app', 102 //把路由器注入主组件中，这样才有效果 103 /* 104 * 注意：router 与 routes 的区别： 105 * router 是一个机制，相当于一个管理者，它来管理路由。 106 * routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。 107 * route，它是一条路由。 108 * */ 109 //如果 router的名称和router的一样可以直接写成 router 即可 110 // router: router 111 router 112 }) 113 </script> 114 </html>
49、vue-router之重定向redirect的使用技巧：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue-router之重定向redirect的使用技巧</title> 6 <script src="./lib/vue.js"></script> 7 <script src="./lib/vue-router.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <router-link to="/">首页</router-link> 12 <a href="http://www.baidu.com">百度</a> 13 <router-link to="/about">关于我们</router-link> 14 <router-view></router-view> 15 </div> 16 <script type="text/x-template" id="home"> 17 <div> 18 <li v-for="v in news"> 19 <!--只要要绑定变量，都可用v-bind: 简写 ：--> 20 <!-- 21 .prevent: 阻止 a 标签的默认跳转行为 22 --> 23 <a href="" @click.prevent="go(v.id)">{{v.title}}</a> 24 </li> 25 </div> 26 </script> 27 <script type="text/x-template" id="content"> 28 <div> 29 <li>{{field.title}} - {{field.id}}</li> 30 <p> 31 {{field.content}} 32 </p> 33 <a href="" @click.prevent="back()">返回</a> 34 </div> 35 </script> 36 </body> 37 <script> 38 const data = [ 39 {id: 1, title: 'PHP开源免费框架', content: '这是PHP的内容...'}, 40 {id: 2, title: 'CMS开源免费框架', content: '这是CMS的内容...'}, 41 {id: 3, title: '关于我们', content: '一个还不知道未来会发生什么的少年，在拼命的学习中....'} 42 ]; 43 // 定义组件 44 const home = { 45 template: "#home", 46 /*子组件的data是一个匿名函数*/ 47 data() { 48 return { 49 news: data 50 } 51 }, 52 methods: { 53 go(id) { 54 //第一种传路径的方式 55 //const url = "/content/" + id; 56 //第二种传路径的方式 57 // const url = {path:'/content/'+id}; 58 //第三种传路径的方式 59 const url = {name:'content',params:{id:id}}; 60 /* 61 * $route：获取参数用的 62 * $router：设置路由用的 63 * */ 64 //push会保存历史记录 65 this.$router.push(url); 66 //replace会替换掉当前的路径 67 // this.$router.replace(url); 68 } 69 } 70 }; 71 const content = { 72 template: "#content", 73 /*子组件的data是一个匿名函数*/ 74 data() { 75 return { 76 field: {} 77 } 78 }, 79 /* 80 * 用 watch 来监听路由，只要路由发生改变就重新加载 content 组件的内容 81 * */ 82 watch: { 83 '$route'(to, from) { 84 this.load(); 85 } 86 }, 87 /* 88 * mounted钩子函数的调用时机： 89 * 编译好的HTML挂载到页面完成后执行的事件钩子，此钩子函数中一般会 90 * 做一些ajax请求获取数据来进行数据初始化 91 * 注意：mounted在整个实例中只执行一次 92 * */ 93 /* 94 * mounted的内容只在组件加载完的时候执行一次，也就是同一个组件只执行一次，不管页面后面的数据改不改变 95 * */ 96 mounted() { 97 this.load(); 98 }, 99 methods: { 100 load() { 101 let id = this.$route.params.id; 102 for (let k = 0; k < data.length; k++) { 103 if (data[k].id == id) { 104 this.field = data[k]; 105 } 106 } 107 }, 108 back() { 109 /* 110 * 如果这里使用了this.$router.go(-1)，则上面的路由跳转 111 * 就不能使用this.$router.replace(url)，因为这个是替换掉路径的，没有历史记录 112 * */ 113 /*go(-1): 返回上一页去*/ 114 this.$router.go(-1); 115 } 116 } 117 }; 118 //定义路由器，然后把组件交给路由器 119 let routes = [ 120 /*:id :定义了一个名为id的变量*/ 121 /*路由带有变量的时候给路由一个名称，便于后面的调用*/ 122 {path: '/', component: home}, 123 {path: '/content/:id', component: content, name: 'content'}, 124 {path: '/about', redirect:{name:'content',params:{id:3}}} 125 ]; 126 127 //routes:routes可以写成routes 128 // let router = new VueRouter({routes:routes}); 129 let router = new VueRouter({routes}); 130 new Vue({ 131 el: '#app', 132 //把路由器注入主组件中，这样才有效果 133 /* 134 * 注意：router 与 routes 的区别： 135 * router 是一个机制，相当于一个管理者，它来管理路由。 136 * routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。 137 * route，它是一条路由。 138 * */ 139 //如果 router的名称和router的一样可以直接写成 router 即可 140 // router: router 141 router 142 }) 143 </script> 144 </html>
50、vue-router之使用路由别名定制：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue-router之使用路由别名定制</title> 6 <script src="./lib/vue.js"></script> 7 <script src="./lib/vue-router.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <router-link to="/">首页</router-link> 12 <a href="http://www.baidu.com">百度</a> 13 <router-link to="/about">关于我们</router-link> 14 <router-view></router-view> 15 </div> 16 <script type="text/x-template" id="home"> 17 <div> 18 <li v-for="v in news"> 19 <!--只要要绑定变量，都可用v-bind: 简写 ：--> 20 <!-- 21 .prevent: 阻止 a 标签的默认跳转行为 22 --> 23 <a href="" @click.prevent="go(v.id)">{{v.title}}</a> 24 </li> 25 </div> 26 </script> 27 <script type="text/x-template" id="content"> 28 <div> 29 <li>{{field.title}} - {{field.id}}</li> 30 <p> 31 {{field.content}} 32 </p> 33 <a href="" @click.prevent="back()">返回</a> 34 </div> 35 </script> 36 </body> 37 <script> 38 const data = [ 39 {id: 1, title: 'PHP开源免费框架', content: '这是PHP的内容...'}, 40 {id: 2, title: 'CMS开源免费框架', content: '这是CMS的内容...'}, 41 {id: 3, title: '关于我们', content: '一个还不知道未来会发生什么的少年，在拼命的学习中....'} 42 ]; 43 // 定义组件 44 const home = { 45 template: "#home", 46 /*子组件的data是一个匿名函数*/ 47 data() { 48 return { 49 news: data 50 } 51 }, 52 methods: { 53 go(id) { 54 //第一种传路径的方式 55 //const url = "/content/" + id; 56 //第二种传路径的方式 57 // const url = {path:'/content/'+id}; 58 //第三种传路径的方式 59 const url = {name:'content',params:{id:id}}; 60 /* 61 * $route：获取参数用的 62 * $router：设置路由用的 63 * */ 64 //push会保存历史记录 65 this.$router.push(url); 66 //replace会替换掉当前的路径 67 // this.$router.replace(url); 68 } 69 } 70 }; 71 const content = { 72 template: "#content", 73 /*子组件的data是一个匿名函数*/ 74 data() { 75 return { 76 field: {} 77 } 78 }, 79 /* 80 * 用 watch 来监听路由，只要路由发生改变就重新加载 content 组件的内容 81 * */ 82 watch: { 83 '$route'(to, from) { 84 this.load(); 85 } 86 }, 87 /* 88 * mounted钩子函数的调用时机： 89 * 编译好的HTML挂载到页面完成后执行的事件钩子，此钩子函数中一般会 90 * 做一些ajax请求获取数据来进行数据初始化 91 * 注意：mounted在整个实例中只执行一次 92 * */ 93 /* 94 * mounted的内容只在组件加载完的时候执行一次，也就是同一个组件只执行一次，不管页面后面的数据改不改变 95 * */ 96 mounted() { 97 this.load(); 98 }, 99 methods: { 100 load() { 101 let id = this.$route.params.id; 102 for (let k = 0; k < data.length; k++) { 103 if (data[k].id == id) { 104 this.field = data[k]; 105 } 106 } 107 }, 108 back() { 109 /* 110 * 如果这里使用了this.$router.go(-1)，则上面的路由跳转 111 * 就不能使用this.$router.replace(url)，因为这个是替换掉路径的，没有历史记录 112 * */ 113 /*go(-1): 返回上一页去*/ 114 this.$router.go(-1); 115 } 116 } 117 }; 118 //定义路由器，然后把组件交给路由器 119 let routes = [ 120 /*:id :定义了一个名为id的变量*/ 121 /*路由带有变量的时候给路由一个名称，便于后面的调用*/ 122 {path: '/', component: home}, 123 {path: '/content/:id', component: content, name: 'content'}, 124 /*alias: 定义路由的别名，是一个数组，所以可以定义多个别名*/ 125 {path: '/content/3', alias:['/about']} 126 ]; 127 128 //routes:routes可以写成routes 129 // let router = new VueRouter({routes:routes}); 130 let router = new VueRouter({routes}); 131 new Vue({ 132 el: '#app', 133 //把路由器注入主组件中，这样才有效果 134 /* 135 * 注意：router 与 routes 的区别： 136 * router 是一个机制，相当于一个管理者，它来管理路由。 137 * routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。 138 * route，它是一条路由。 139 * */ 140 //如果 router的名称和router的一样可以直接写成 router 即可 141 // router: router 142 router 143 }) 144 </script> 145 </html>