码迷,mamicode.com
首页 > 其他好文 > 详细

Vue的学习(五)

时间:2020-01-04 18:27:18      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:关于   历史记录   menu   one   bin   免费   执行   没有   参数   

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(a\d{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>

Vue的学习(五)

标签:关于   历史记录   menu   one   bin   免费   执行   没有   参数   

原文地址:https://www.cnblogs.com/maigy/p/12149685.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!