<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="../vue2.2.js"></script>

        <script src="../vue-router2.1.js"></script>

    </head>

    <body>

        <div id="app">

            <p>

                <!--通过to属性指定链接-->

                <!--<router-link>默认会被渲染成一个<a>标签-->

                <router-link to="/home" tag="li">Home</router-link>

                <router-link to="/about">About</router-link>

                <hr/>

                <!--<router-link :to="{path:'home'}">Home</router-link>

                <router-link :to="'about'" tag="li">About</router-link>-->

            </p>

            <!--路由出口，将路由匹配的组件渲染到这里-->

            <!--将自动设置class属性值 .router-link-active-->

            <router-view></router-view>

        </div>

    <script>

        //1.定义组件

        const Home = {

            template:"<div><h1>Home</h1><p>Hello,vue router!</p></div>"

        }

        const About = {

            template:"<div><h1>About</h1><p>这是关于vue-router</p></div>"

        }

        //2.定义路由 (每个路由应该映射一个组件)

        const routes = [{

            path:"/home",

            component:Home

        },{

            path:"/about",

            component:About

        },{

            path:"/",

            redirect:"/home"

            /*component:Home*/

        },{

            path:"*",

            redirect:"/home"//重定向

        }

        ]

        //3.创建router实例 ，然后传‘routes’ 配置

        const router = new VueRouter({

            linkActiveClass:'active',

            /*mode:"history",*/

            routes // 相当于   routes:routes

        })

        //4.创建和挂载根实例，从而让整个应用都有路由功能

        const vm = new Vue({

            router   //相当于 router:router

        }).$mount("#app")

    </script>

    </body>

</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. BootstrapValidator demo

    source:http://bv.doc.javake.cn/api/ BootstrapValidator is the best jQuery plugin to validate form fi ...

  2. SetLocalTime API函数设置本地时间（DateTimeToSystemTime函数，把TDateTime转换成TSystemTime）

    procedure setLocalDateTime(Value: TDateTime);var  lSystemDateTime: TSystemTime;begin  DateTimeToSyst ...

  3. Delphi XE10调用WebService服务获取图片验证码

    最近做了一个程序,需要使用图片验证码,百度一下,网上一大把免费的WebService服务,随意找一个用用,效果还可以.WebService地址:http://www.webxml.com.cn/Web ...

  4. 网络驱动移植之简述CS8900A网络芯片的基本原理

    CS8900A数据手册:http://www.cirrus.com/cn/products/cs8900a.html 1.概述 CS8900A是CIRRUS LOGIC公司生产的低功耗.性能优越的16 ...

  5. Linux文件锁【转】

    本文转载自:http://blog.csdn.net/dragon_li_chen/article/details/17147911 一.文件锁的分类: 翻阅参考资料,你会发现文件锁可以进行很多的分类 ...

  6. Webdriver中关于driver.navigate().to()和driver.get()使用的区别

    先是有一个父页上button弹开一个子页,总共有4个子页,必须前一个页上的必填信息录完,才能在这个页面触发下一个子页. 用driver.navigate().to(baseUrl2),直接跳转到第2个 ...

  7. java 泛型的理解与应用

    为什么使用泛型? 举个例子: public class GenericTest { public static void main(String[] args) { List list = new A ...

  8. springmvc处理ajax跨域

    解决跨域问题:在web.xml中配置corsFilter mvc.xml 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!- ...

  9. jQuery得到多个值只能用取Class ,不能用取ID

    如果页面有多个checkbox: <input type="checkbox"   class="checkApply"    id="chec ...

  10. 重置HTML

    html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0}fieldset ...