Vue系列之 => 路由匹配

最新推荐文章于 2024-09-29 20:37:59 发布

weixin_30568715

最新推荐文章于 2024-09-29 20:37:59 发布

阅读量135

点赞数

原文链接：http://www.cnblogs.com/winter-shadow/p/10216851.html

版权

路由基本使用，加动画切换
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 6 <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
 7 <title>管理后台</title>
 8 <script src="../lib/jquery2.1.4.min.js"></script>
 9 <script src="../lib/Vue2.5.17.js"></script>
10 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
11 <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
12 <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
13 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
14 </head>
15 <style>
16     /* 使用了router-link的组件会有一个router-link-active类 */
17     .router-link-active {
18         color: red;
19         font-weight: bold;
20         font-size: 18px;
21     }
22 
23     /* 动画类 */
24     .tog-enter,.tog-leave-to{
25         opacity: 0;
26         transform: translateX(150px);
27     }
28     .tog-enter-active,.tog-leave-active{
29         transition: all 0.6s ease;
30     }
31 </style>
32 <body>
33     <div id="app">
34         <!-- <a href="#/login">登录</a>
35         <a href="#/register">登录</a> -->
36             <!-- 不推荐使用#号这种方式 -->
37         
38         <!-- Vue-router提供了一个<router-link to="/lgin"></router-link> -->
39         <router-link to="/login">登录</router-link>
40         <!-- 默认渲染为一个a标签，通过tag可以修改 -->
41         <router-link to="/register" tag="span">注册</router-link>
42         <!-- 这是由vue-router提供的元素，用来当作占位符的，路由规则匹配到的组件就会展示到这个router-view中 -->
43         <!-- 使用router-view 提供一个展示的容器 -->
44         <transition name="tog" mode="out-in">
45             <router-view></router-view>
46         </transition>
47     </div>
48     <template id="tmp">
49         <div>
50             <h1>我是模板一的内容，登录</h1>
51         </div>
52     </template>
53     <template id="tmp1">
54         <div>
55             <h1>我是模板二的内容，注册</h1>
56         </div>
57     </template>
58     <script>
59 
60         var login = {
61             template : '#tmp'
62         }
63         var register = {
64             template : '#tmp1'
65         }
66 
67         var routerObj = new VueRouter({
68             // route //这个配置对象中的router表示路由匹配规则的意思
69             routes : [ //路由匹配规则
70                 // 每个路由规则都是一个对象，这个规则对象身上有两个必须的属性
71                 // 属性1是path , 表示监听哪个路由链接地址
72                 // 属性2是component ， 表示如果路由前面匹配到的path,则展示component属性对应的组件
73                 // component的属性值，必须是一个模板对象，不能是一个组件名称。
74                 { path : '/' , redirect : '/login'}, //这是的redirect和node中的redirect不一样。
75                 { path : '/login' , component : login},
76                 { path : '/register' , component : register},
77             ],
78             // 自定义激活的类名称
79             linkActiveClass : 'myactive'
80         })
81 
82         var vm = new Vue({
83             el : '#app',
84             data : {},
85             methods: {
86 
87             },
88             // 将路由规则对象注册到vm实例上用来监听url地址变化 ，然后展示对应组件。
89             router : routerObj
90         })
91     </script>
92 </body>
93 </html>

路由规则中传参数

  1 <!DOCTYPE html>
  2 <html>
  3 
  4 <head>
  5     <meta charset="utf-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7     <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" />
  8     <title>管理后台</title>
  9     <script src="../lib/jquery2.1.4.min.js"></script>
 10     <script src="../lib/Vue2.5.17.js"></script>
 11     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 12     <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
 13     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
 14     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
 15         crossorigin="anonymous">
 16 </head>
 17 <style>
 18     a:focus,a:hover{
 19         color: red;
 20     }
 21     .myactive {
 22         color: red;
 23         font-size: 26px;
 24         font-weight: bold;
 25     }
 26     .toa-enter,.toa-leave-to{
 27         opacity: 0;
 28         transform: translateX(100px);
 29     }
 30     .toa-enter-active,.toa-leave-active{
 31         transition: all 0.6s ease;
 32     }
 33 </style>
 34 
 35 <body>
 36     <div id="app">
 37         <!-- 在路由中，传id=10的参数 -->
 38         <router-link to="/login?id=10&name=test">登录一下</router-link>
 39         <router-link to="/register?id=10">注册一下</router-link>
 40 
 41         <transition name="toa" mode="out-in">
 42             <router-view>注册一下</router-view>
 43         </transition>
 44     </div>
 45 
 46     <template id="tmp1">
 47         <div>
 48             登录一下{{ $route.query.id }} + {{ $route.query.name }}
 49         </div>
 50     </template>
 51     <template id="tmp2">
 52         <div>
 53             注册两下
 54         </div>
 55     </template>
 56     <script>
 57         var login = {
 58             template: '#tmp1',
 59             data(){
 60                 return {
 61                     msg : '123'
 62                 }
 63             },
 64             created(){ //组件的生命周期钩子函数
 65             //this指当前组件，当前组件下有个$route
 66                 console.log(this.$route.query.id);
 67             }
 68         };
 69 
 70         var register = {
 71             template: '#tmp2'
 72         };
 73 
 74         //创建路由对象
 75         var routerObj = new VueRouter({
 76             routes: [
 77                 {
 78                     path : '/',
 79                     redirect : '/login'
 80                 },
 81                 {
 82                     path: '/login',
 83                     component: login
 84                 },
 85                 {
 86                     path: '/register',
 87                     component: register
 88                 },
 89             ],
 90             linkActiveClass : 'myactive'
 91         })
 92         var vm = new Vue({
 93             el: '#app',
 94             data: {},
 95             methods: {
 96 
 97             },
 98             router: routerObj
 99 
100         })
101     </script>
102 </body>
103 
104 </html>

使用params传参数

  1 <!DOCTYPE html>
  2 <html>
  3 
  4 <head>
  5     <meta charset="utf-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7     <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" />
  8     <title>管理后台</title>
  9     <script src="../lib/jquery2.1.4.min.js"></script>
 10     <script src="../lib/Vue2.5.17.js"></script>
 11     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 12     <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
 13     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
 14     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
 15         crossorigin="anonymous">
 16 </head>
 17 <style>
 18     a:focus,a:hover{
 19         color: red;
 20     }
 21     .myactive {
 22         color: red;
 23         font-size: 26px;
 24         font-weight: bold;
 25     }
 26     .toa-enter,.toa-leave-to{
 27         opacity: 0;
 28         transform: translateX(100px);
 29     }
 30     .toa-enter-active,.toa-leave-active{
 31         transition: all 0.6s ease;
 32     }
 33 </style>
 34 
 35 <body>
 36     <div id="app">
 37         <!-- 在路由中，传id=10的参数 -->
 38         <router-link to="/login/12/alln">登录一下</router-link>
 39         <router-link to="/register">注册一下</router-link>
 40 
 41         <transition name="toa" mode="out-in">
 42             <router-view>注册一下</router-view>
 43         </transition>
 44     </div>
 45 
 46     <template id="tmp1">
 47         <div>
 48             登录一下
 49         </div>
 50     </template>
 51     <template id="tmp2">
 52         <div>
 53             注册两下
 54         </div>
 55     </template>
 56     <script>
 57         var login = {
 58             template: '#tmp1',
 59             data(){
 60                 return {
 61                     msg : '123'
 62                 }
 63             },
 64             created(){ //组件的生命周期钩子函数
 65             //this指当前组件，当前组件下有个$route
 66                 console.log(this.$route.params.id);
 67                 console.log(this.$route.params.name);
 68             }
 69         };
 70 
 71         var register = {
 72             template: '#tmp2'
 73         };
 74 
 75         //创建路由对象
 76         var routerObj = new VueRouter({
 77             routes: [
 78                 {
 79                     path : '/',
 80                     redirect : '/login'
 81                 },
 82                 {
 83                     path: '/login/:id/:name',
 84                     component: login
 85                 },
 86                 {
 87                     path: '/register',
 88                     component: register
 89                 },
 90             ],
 91             linkActiveClass : 'myactive'
 92         })
 93         var vm = new Vue({
 94             el: '#app',
 95             data: {},
 96             methods: {
 97 
 98             },
 99             router: routerObj
100 
101         })
102     </script>
103 </body>
104 
105 </html>