1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script src="../vue2.2.js"></script>
  7.         <script src="../vue-router2.1.js"></script>
  8.     </head>
  9.     <body>
  10.         <div id="app">
  11.             <p>
  12.                 <!--通过to属性指定链接-->
  13.                 <!--<router-link>默认会被渲染成一个<a>标签-->
  14.                 <router-link to="/home" tag="li">Home</router-link>
  15.                 <router-link to="/about">About</router-link>
  16.                 <hr/>
  17.                 <!--<router-link :to="{path:'home'}">Home</router-link>
  18.                 <router-link :to="'about'" tag="li">About</router-link>-->
  19.             </p>
  20.  
  21.             <!--路由出口，将路由匹配的组件渲染到这里-->
  22.             <!--将自动设置class属性值 .router-link-active-->
  23.             <router-view></router-view>
  24.         </div>
  25.  
  26.     <script>
  27.         //1.定义组件
  28.         const Home = {
  29.             template:"<div><h1>Home</h1><p>Hello,vue router!</p></div>"
  30.         }
  31.  
  32.         const About = {
  33.             template:"<div><h1>About</h1><p>这是关于vue-router</p></div>"
  34.         }
  35.  
  36.         //2.定义路由 (每个路由应该映射一个组件)
  37.         const routes = [{
  38.             path:"/home",
  39.             component:Home
  40.         },{
  41.             path:"/about",
  42.             component:About
  43.         },{
  44.             path:"/",
  45.             redirect:"/home"
  46.             /*component:Home*/
  47.         },{
  48.             path:"*",
  49.             redirect:"/home"//重定向
  50.         }
  51.         ]
  52.  
  53.         //3.创建router实例 ，然后传‘routes’ 配置
  54.         const router = new VueRouter({
  55.             linkActiveClass:'active',
  56.             /*mode:"history",*/
  57.             routes // 相当于   routes:routes
  58.         })
  59.  
  60.         //4.创建和挂载根实例，从而让整个应用都有路由功能
  61.         const vm = new Vue({
  62.             router   //相当于 router:router
  63.         }).$mount("#app")
  64.  
  65.     </script>
  66.     </body>
  67. </html>

vue2.0 路由知识一(路由的创建的全过程)的更多相关文章

  1. vue2.0学习笔记之路由（二）路由嵌套+动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue2.0学习笔记之路由（二）路由嵌套

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 路由知识 静态路由 rip eigrp ospf

    第1章 路由选择原理 1.1 几个概念 1.1.1 被动路由协议 用来在路由之间传递用户信息 1.1.2 主动路由协议 用于维护路由器的路由表 R2#show ip route Codes: C - ...

  4. vue2.0 vue-cli项目中路由之间的参数传递

    1.首先配置路由, import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new R ...

  5. vue2.0基础知识，及webpack中vue的使用

    ## 基础指令 ## [v-cloak]{         Display:none;     }     <p v-cloak>xx{{msg}}xx</p> //解决闪烁问 ...

  6. vue2.0 之 douban （三）创建header组件

    1.分析 首页的header背景是绿色的,并且有一个搜索框,其他页面都是灰色的背景,在header的左侧,是一个返回按钮,右侧,有分享或者评论等图标,中间就是header的标题.我们先不做有搜索框的h ...

  7. vue2.0 之 douban （四）创建Swipe图片轮播组件

    swiper中文文档:http://www.swiper.com.cn 1.我们在components文件夹里创建一个swipe组件,将需要用到的js以及css文件复制到assets/lib文件夹下, ...

  8. vue2.0 之 douban （二）创建自定义组件tabbar

    1.大体布局 这个组件分为两部分:第一个是组件的外层容器,第二个是组件的子容器item,子组件里面又分为图片和文字组合.子组件有2个状态,一个默认灰色的状态,一个选中状态,我们来实现一下这个组件的布局 ...

  9. vue2.0 之 douban （五）创建cell,media-cell组件

    1.组件cell 这里的cell分为三种样式,左侧带图标,不带图标,以及左侧带竖线的cell. 每一个组件都有一个底部边框: 这里我们采用了移动端1px像素问题的解决方法:父级元素设置相对定位,构建1 ...

随机推荐

  1. PHP 7.2 RC3 on CentOS/RHEL 7.3 via Yum

    https://webtatic.com/packages/php72/ rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-lat ...

  2. solr入门之多线程操作solr中索引字段的解决

    涉及的问题: 建索引时有一个字段是该词语出现的次数,这个字段是放在solr里的  而我用的是多线程来进行全量导入的,这里就涉及到了多线程问题 多个线程操作同一个变量时怎样处理? 我是这样子做的 : 首 ...

  3. springmvc的异常统一处理

    在项目实际开发中,异常的统一处理是一个常态.假如不使用异常统一处理,我们往往需要在service层中捕获异常,并且根据不同的异常在result中的设置不同的code并给予相应的提示.这样可能会导致不同 ...

  4. （2）MyEclipse怎么关联本地Tomcat服务器

    1,在MyEclipse中点击服务器按钮: 2,选择“Configure Server” 3,在弹出面板中选择 [Servers]-[Tomcat]-[对应版本的服务器] 5,看上图,先选择Enabl ...

  5. mondb08---导入导出

    //Mongodb数据的导入导出 : 导入/导出可以操作的是本地的mongodb服务器,也可以是远程的. 所以,都有如下通用选项:(本地机就不用这个了) -h host 主机 --port port ...

  6. 网络驱动移植之例解netdev_priv函数

    版权声明:本文为博主原创文章,未经博主允许不得转载. 开发平台:Ubuntu 11.04 编译器:gcc version 4.5.2 (Ubuntu/Linaro 4.5.2-8ubuntu4) 内核 ...

  7. 【Usaco2008 Dec】Patting Heads

    [题目链接] 点击打开链接 [算法] 我们知道,每个编号为a[i]都要被编号是a[i]的约数的牛拍一次头(除了它自己),因此,只需用类似于筛法的方式统计答案, 即可 [代码] #include< ...

  8. 【BZOJ 1233】 干草堆

    [题目链接] 点击打开链接 [算法] 这题有一个性质 : 位于顶层的干草堆可以满足宽度最小且高度最高 根据这个性质,用单调队列优化DP,即可 [代码] #include<bits/stdc++. ...

  9. appium学习【五】【转】appium实现屏幕向左滑动

    转自http://www.cnblogs.com/testhub/p/5949668.html 前些日子写一个滑动手机页面的小脚本,看到大家给的内容都是swipe方法,这里对swipe方法做一个小介绍 ...

  10. css 实现元素四角图片样式，元素的大小不定

    demo 效果 css body { margin:; } .popup p{ margin-bottom:20px; margin-left:200px; } .popup p span{ disp ...