• Vue router 的使用--初级


    在说 VueRouter 之前,首先要弄明白vueRouter 是干什么的,有什么用

    说出来其实很简单,就是一个模板替换的问题,当路由改变的时候,把和路由相关的模板显示出来,就是这么简单。但是,当我们不知道为什么的时候,即使瞎猫碰到死耗子做出来了,也不知道是怎么回事,下次仍然是不会,我想,我们应该要有追根究底的精神

    1. 首先,写html ,因为不论是替换与否,我们都是通过html来执行的,定义要替换的

    2. 写替换模板

    3.注册vue对象,及替换要修改的变量即data

    4.定义路由的映射关系

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <script src="../js/vue.js"></script>
     8     <script src="../js/vue-router.js"></script>
     9     <title>Document</title>
    10 </head>
    11 <body>
    12     <div id="app">
    13         <div>
    14             <!-- 书写链接按钮,也就是a标签 -->
    15             <a v-link="{path:'/home'}">Home</a>
    16             <a v-link="{path:'/about'}">About</a>
    17         </div>
    18         <!-- 要使用路由替换的地方 ,先整出一个框框出来-->
    19         <router-view></router-view>
    20     </div>
    21     <!-- 模板替换的内容1 -->
    22     <template id="home">
    23         <div>
    24                 <h3 class="a">Home page</h3>
    25                 <p>{{content}}</p>
    26         </div>
    27     </template>
    28     <!-- 模板替换的内容2 -->
    29     <template id="about">
    30             <div>
    31                     <h3 class="a">About page</h3>
    32                     <p>{{content}}</p>
    33             </div>
    34     </template>
    35 
    36     <script>
    37         var Home = Vue.extend({
    38             template: '#home',
    39             data: function() {
    40                 return {
    41                     content: 'this is home page!'
    42                 }
    43             }
    44         });
    45         var About = Vue.extend({
    46             template: '#about',
    47             data: function() {
    48                 return {
    49                     content: 'this is about page!'
    50                 }
    51             }
    52         });
    53         // 创建路由
    54         var router = new VueRouter();
    55         // 构造路由映射关系
    56         router.map({
    57             '/home': { // 这里和 a链接里的地址属性对应
    58                 component: Home,
    59             },
    60             '/about': { // 这里和 a链接的地址属性对应
    61                 component: About,
    62             }
    63         });
    64         // 路由重定向,当路由为'/'时,自动映射到'/home'页面
    65         router.redirect({
    66             '/': '/home', // 当链接伪‘/’时,把它重定向为到 ‘/home’的链接
    67         });
    68         var app = Vue.extend({});
    69         // 开启路由功能
    70         router.start(app, "#app");
    71     </script>
    72 </body>
    73 </html>

    2. 在路由上加入bootstrap 排版

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
     8     <script src="../js/vue.js"></script>
     9     <script src="../js/vue-router.js"></script>
    10     <title>Document</title>
    11 </head>
    12 <body>
    13     <div class="container" id="app">
    14         <div class="row">
    15             <div class="well well-lg">第一个路由应用</div>
    16             <div class="col-md-3">
    17                 <ul class="nav nav-pills nav-stacked">
    18                     <li>
    19                         <a href="" v-link="{path:'/home'}">home</a>
    20                     </li>
    21                     <li>
    22                         <a href="" v-link="{path:'/about'}">about</a>
    23                     </li>
    24                 </ul>
    25             </div>
    26             <div class="col-md-9">
    27                 <router-view></router-view>
    28             </div>
    29         </div>
    30     </div>
    31     <template id="home">
    32         <div>
    33             <h3>homepage</h3>
    34             <p>{{content}}</p>
    35         </div>
    36     </template>
    37     <template id="about">
    38         <div>
    39             <h3>aboutpage</h3>
    40             <p>{{content}}</p>
    41         </div>
    42     </template>
    43     <script>
    44         var Home = Vue.extend({
    45             template: '#home',
    46             data: function() {
    47                 return {
    48                     content: "huanying2015,这里是主页内容"
    49                 }
    50             }
    51         });
    52         var About = Vue.extend({
    53             template: '#about',
    54             data: function() {
    55                 return {
    56                     content: "huanying2015,这里是相关内容,就是其他相关内容"
    57                 }
    58             }
    59         });
    60         var router = new VueRouter();
    61         router.map({
    62             '/home': {
    63                 component: Home,
    64             },
    65             '/about': {
    66                 component: About,
    67             }
    68         });
    69         router.redirect({
    70             '/': '/home'
    71         });
    72         var App = Vue.extend({});
    73         router.start(App, "#app");
    74     </script>
    75 </body>
    76 </html>

    3.  模板嵌套:

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4     <meta charset="UTF-8">
      5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
      7     <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
      8     <script src="../js/vue.js"></script>
      9     <script src="../js/vue-router.js"></script>
     10     <title>Document</title>
     11 </head>
     12 <body>
     13     <div class="container" id="app">
     14         <div class="row">
     15             <div class="well well-lg">第一个路由应用</div>
     16             <div class="col-md-3">
     17                 <ul class="nav nav-pills nav-stacked">
     18                     <li><a href="" v-link="{path:'/home'}">首页</a></li>
     19                     <li>
     20                         <a href="" v-link="{path:'/about'}">关于我们</a>
     21                     </li>
     22                 </ul>
     23             </div>
     24         </div>
     25         <div class="col-md-9">
     26             <router-view></router-view>
     27         </div>
     28     </div>
     29     <template id="home">
     30         <div>
     31             <h3>首页</h3>
     32             <p>{{content}}</p>
     33         </div>
     34         <div>
     35             <ul class="nav nav-tabs">
     36                 <li>
     37                     <a href="" v-link="{path:'/home/news'}">新闻</a>
     38                 </li>
     39                 <li>
     40                         <a href="" v-link="{path:'/home/video'}">视频</a>
     41                 </li>
     42             </ul>
     43         </div>
     44         <router-view></router-view>
     45     </template>
     46     <template id="about">
     47         <div>
     48             <h3>关于我们</h3>
     49             <p >{{content}}</p>
     50         </div>
     51     </template>
     52     <template id="news">
     53         <div>
     54                 <li>倒计时1天|CCTC 2017最全参会指南</li>
     55                 <li>200分钟QA交流,14个互联网应用架构和大数据技术案例在等你</li>
     56                 <li>自己动手扩展分布式调用链</li>
     57                 <li>分布式系统下的纠删码技术之Erasure Code</li>
     58         </div>
     59     </template>
     60     <template id="video">
     61         <div>
     62                 <li>Microsoft发布.NET架构指南草案</li>
     63                 <li>详解Android中的SQLite数据库存储</li>
     64                 <li>携程实时用户行为系统实践</li>
     65                 <li>带着问题学 Machine Learning:什么是机器学</li>
     66         </div>
     67     </template>
     68     <script>
     69         var Home = Vue.extend({
     70             template: '#home',
     71             data: function() {
     72                 return {
     73                     content: "huanying2015,这里是首页"
     74                 }
     75             }
     76         });
     77         var About = Vue.extend({
     78             template: '#about',
     79             data: function() {
     80                 return {
     81                     content: "huanying2015,这里是关于我们的内容"
     82                 }
     83             }
     84         });
     85         var News = Vue.extend({
     86             template: "#news",
     87         });
     88         var Video = Vue.extend({
     89             template: "#video"
     90         });
     91         var router = new VueRouter();
     92         router.map({
     93             '/home': {
     94                 component: Home,
     95                 subRoutes: {
     96                     '/news': {
     97                         component: News,
     98                     },
     99                     '/video': {
    100                         component: Video
    101                     }
    102 
    103                 }
    104             },
    105             '/about': {
    106                 component: About,
    107                 subRoutes: {
    108 
    109                 }
    110             }
    111         });
    112         router.redirect({
    113             '/': '/home',
    114             '/home': '/home/news'
    115         });
    116         var App = Vue.extend({});
    117         router.start(App, "#app");
    118     </script>
    119 </body>
    120 </html>

    4. VueRouter 参数应用:

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4     <meta charset="UTF-8">
      5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
      7     <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
      8     <script src="../js/vue.js"></script>
      9     <script src="../js/vue-router.js"></script>
     10     <title>Document</title>
     11 </head>
     12 <body>
     13     <div class="container" id="app">
     14         <div class="row">
     15             <div class="well well-lg">第一个路由应用</div>
     16             <div class="col-md-3">
     17                 <ul class="nav nva-pills nav-stacked">
     18                     <li>
     19                         <a href="" v-link="{path:'/home'}">首页</a>
     20                     </li>
     21                     <li>
     22                         <a href="" v-link="{path:'/about'}">关于我们</a>
     23                     </li>
     24                 </ul>
     25             </div>
     26             <div class="col-md-9">
     27                 <router-view></router-view>
     28             </div>
     29         </div>
     30     </div>
     31     <template id="home">
     32         <div>
     33             <h3>首页</h3>
     34             <p >{{content}}</p>
     35         </div>
     36         <div class="a">
     37             <ul class="nav nav-tabs">
     38                 <li><a href="" v-link="{path:'/home/news'}">新闻</a></li>
     39                 <li><a href="" v-link="{path:'/home/video'}">视屏</a></li>
     40             </ul>
     41         </div>
     42         <div>
     43             <router-view></router-view>
     44         </div>
     45     </template>
     46     <template id="about">
     47             <div>
     48                 <h3>关于我们</h3>
     49                 <p>{{content}}</p>
     50             </div>
     51         </template>
     52 
     53     <template id="news">
     54             <ul>
     55                 <li><a v-link="{path: '/home/news/detail/01'}">倒计时1天|CCTC 2017最全参会指南</a></li>
     56                 <li><a v-link="{path: '/home/news/detail/02'}">200分钟QA交流,14个互联网应用架构和大数据技术案例在等你</a></li>
     57                 <li><a v-link="{path: '/home/news/detail/03'}">自己动手扩展分布式调用链</a></li>
     58                 <li><a v-link="{path: '/home/news/detail/04'}">分布式系统下的纠删码技术之Erasure Code</a></li>
     59             </ul>
     60             <router-view></router-view>
     61         </template>
     62     <template id="video">
     63             <ul>
     64                 <li>Microsoft发布.NET架构指南草案</li>
     65                 <li>详解Android中的SQLite数据库存储</li>
     66                 <li>携程实时用户行为系统实践</li>
     67                 <li>带着问题学 Machine Learning:什么是机器学</li>
     68             </ul>
     69         </template>
     70     <template id="detail">
     71                 <div>
     72                     <p>新闻详情:  {{$route.params.id}}</p>
     73                     <p>当前路径:{{$route.path}}</p>
     74                     <p>当前参数:{{$route.params | json}}</p>
     75                     <p>路由名称:{{$route.name}}</p>
     76                     <p>路由查询参数:{{$route.query | json}}</p>
     77                     <p>路由匹配项:{{$route.matched | json}}</p>
     78                 </div>
     79             </template>
     80     <script>
     81         var Home = Vue.extend({
     82             template: '#home',
     83             data: function() {
     84                 return {
     85                     content: 'huanying2015,这里是主页页面'
     86                 }
     87             }
     88         });
     89         var About = Vue.extend({
     90             template: '#about',
     91             data: function() {
     92                 return {
     93                     content: 'huanying2015,这里是关于相关也的页面'
     94                 }
     95             }
     96         });
     97         var News = Vue.extend({
     98             template: "#news"
     99         });
    100         var Video = Vue.extend({
    101             template: "#video"
    102         });
    103         var Detail = Vue.extend({
    104             template: '#detail'
    105         });
    106         var router = new VueRouter();
    107         router.map({
    108             '/home': {
    109                 name: 'home',
    110                 component: Home,
    111                 subRoutes: {
    112                     '/news': {
    113                         name: 'news',
    114                         component: News,
    115                         subRoutes: {
    116                             '/detail/:id': {
    117                                 name: 'detail',
    118                                 component: Detail
    119                             }
    120                         }
    121                     },
    122                     '/video': {
    123                         component: Video
    124                     }
    125                 }
    126             },
    127             '/about': {
    128                 component: About
    129             }
    130         });
    131         router.redirect({
    132             '/': '/home',
    133             '/home': '/home/news'
    134         });
    135         var App = Vue.extend({});
    136         router.start(App, '#app');
    137     </script>
    138 </body>
    139 </html>

    5. a链接选中状态:在a链接里加入:activeClass:'active'

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4     <meta charset="UTF-8">
      5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
      7     <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
      8     <script src="../js/vue.js"></script>
      9     <script src="../js/vue-router.js"></script>
     10     <title>Document</title>
     11 </head>
     12 
     13 <body>
     14     <div id="app" class="container">
     15         <div class="row">
     16             <div class="well well-lg">第一个路由应用</div>
     17             <div class="col-md-3">
     18                 <ul class="nav nav-pills nav-stacked">
     19                     <li><a href="#" v-link="{path : '/home', activeClass : 'active'}">首页</a></li>
     20                     <li><a href="#" v-link="{path : '/about', activeClass : 'active'}">关于我们</a></li>
     21                 </ul>
     22             </div>
     23             <div class="col-md-9">
     24                 <router-view></router-view>
     25             </div>
     26         </div>
     27     </div>
     28     <template id="home">
     29                 <div>
     30                     <h3>首页</h3>
     31                     <p>{{content}}</p>
     32                 </div>
     33                 <div>
     34                     <ul class="nav nav-tabs">
     35                         <li><a v-link="{path : '/home/news', activeClass : 'active'}" href="#">新闻</a></li>
     36                         <li><a v-link="{path : '/home/video', activeClass : 'active'}" href="#">视频</a></li>
     37                     </ul>
     38                 </div>
     39                 <router-view></router-view>
     40             </template>
     41     <template id="about">
     42                 <div>
     43                     <h3>关于我们</h3>
     44                     <p>{{content}}</p>
     45                 </div>
     46             </template>
     47 
     48     <template id="news">
     49                 <ul class="nav nav-pills nav-stacked">
     50                     <li><a v-link="{path: '/home/news/detail/01', activeClass : 'active'}">倒计时1天|CCTC 2017最全参会指南</a></li>
     51                     <li><a v-link="{path: '/home/news/detail/02', activeClass : 'active'}">200分钟QA交流,14个互联网应用架构和大数据技术案例在等你</a></li>
     52                     <li><a v-link="{path: '/home/news/detail/03', activeClass : 'active'}">自己动手扩展分布式调用链</a></li>
     53                     <li><a v-link="{path: '/home/news/detail/04', activeClass : 'active'}">分布式系统下的纠删码技术之Erasure Code</a></li>
     54                 </ul>
     55                 <router-view></router-view>
     56             </template>
     57 
     58     <template id="video">
     59                 <ul>
     60                     <li>Microsoft发布.NET架构指南草案</li>
     61                     <li>详解Android中的SQLite数据库存储</li>
     62                     <li>携程实时用户行为系统实践</li>
     63                     <li>带着问题学 Machine Learning:什么是机器学</li>
     64                 </ul>
     65             </template>
     66     <template id="detail">
     67                 <div>
     68                     <p>新闻详情:  {{$route.params.id}}</p>
     69                     <p>当前路径:{{$route.path}}</p>
     70                     <p>当前参数:{{$route.params | json}}</p>
     71                     <p>路由名称:{{$route.name}}</p>
     72                     <p>路由查询参数:{{$route.query | json}}</p>
     73                     <p>路由匹配项:{{$route.matched | json}}</p>
     74                 </div>
     75             </template>
     76     <script>
     77         var Home = Vue.extend({
     78             template: '#home',
     79             data: function() {
     80                 return {
     81                     content: 'huanying2015,这里是主页页面'
     82                 }
     83             }
     84         });
     85         var About = Vue.extend({
     86             template: '#about',
     87             data: function() {
     88                 return {
     89                     content: 'huanying2015,这里是关于相关也的页面'
     90                 }
     91             }
     92         });
     93         var News = Vue.extend({
     94             template: "#news"
     95         });
     96         var Video = Vue.extend({
     97             template: "#video"
     98         });
     99         var Detail = Vue.extend({
    100             template: '#detail'
    101         });
    102         var router = new VueRouter();
    103         router.map({
    104             '/home': {
    105                 name: 'home',
    106                 component: Home,
    107                 subRoutes: {
    108                     '/news': {
    109                         name: 'news',
    110                         component: News,
    111                         subRoutes: {
    112                             '/detail/:id': {
    113                                 name: 'detail',
    114                                 component: Detail
    115                             }
    116                         }
    117                     },
    118                     '/video': {
    119                         component: Video
    120                     }
    121                 }
    122             },
    123             '/about': {
    124                 component: About
    125             }
    126         });
    127         router.redirect({
    128             '/': '/home',
    129             '/home': '/home/news'
    130         });
    131         var App = Vue.extend({});
    132         router.start(App, '#app');
    133     </script>
    134 </body>
    135 </html>

  • 相关阅读:
    struts2 错误:Dispatcher initialization failed java.lang.RuntimeException
    JavaScript如何实现拖放功能
    Javascript异步执行时要小心的变量作用域
    Javascript异步编程
    Origin null is not allowed by Access-Control-Allow-Origin
    eclipse spket插件 错误 Syntax error on token "(", FunctionExpressionHeader expected after this
    EL--Expression Language
    [Swift]LeetCode820. 单词的压缩编码 | Short Encoding of Words
    [Swift]LeetCode879. 盈利计划 | Profitable Schemes
    [Swift]LeetCode878. 第 N 个神奇数字 | Nth Magical Number
  • 原文地址:https://www.cnblogs.com/huanying2015/p/8596905.html
Copyright © 2020-2023  润新知