<!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. Delphi的函数指针

    不求全面,先留个爪: TNotifyEvent = procedure(Sender: TObject) of object; TMethod = record Code, Data: Pointer ...

  2. 【Java报错】Message: 3 字节的 UTF-8 序列的字节 2 无效

    报错logs 2015-03-10 10:15:32,360 ERROR [qtp32195030-27] [InvokeAfterValve.java:55] - javax.xml.stream. ...

  3. js事件绑定/监听

    事件绑定/监听的方法 1.直接绑定 顾名思义,直接在DOM元素上绑定onclick.onmouseover.onmouseout.onmousedown.onmouseup.ondblclick.on ...

  4. Uvalive 4043 Ants —— 二分图最大权匹配 KM算法

    题目链接:https://vjudge.net/problem/UVALive-4043 题意: 给出n个白点和n个黑点的坐标, 要求用n条不相交的线段把他们连接起来,其中每条线段恰好连接一个白点和黑 ...

  5. bzoj2660

    dp 看了挺长时间的,这篇写的很好:http://97littleleaf11.xyz/oi/bzoj-2660/ 我们先把n按照斐波那契数列贪心分解,然后发现可以把现在组合的斐波那契数分解成两个较小 ...

  6. 通过struts2-spring-plugin集成Struts2和Spring，报错：ClassNotFound：*Interceptor.......

    集成Struts2和Spring的时候,出现错误,ClassNotFound: *interceptor,之所以是*interceptor是因为报了好多个这样的错误,而且类名都不一样. 集成方法是通过 ...

  7. C#6.0的新特性之内插字符串

    https://docs.microsoft.com/zh-cn/dotnet/csharp/language-reference/keywords/interpolated-strings C# 6 ...

  8. EF 连接MySql

    使用EntityFramework6连接MySql数据库(db first方式) http://www.cnblogs.com/24la/archive/2014/04/03/ef6-mysql.ht ...

  9. 5950 Recursive sequence (矩阵快速幂)

    题意:递推公式 Fn = Fn-1 + 2 * Fn-2 + n*n,让求 Fn; 析:很明显的矩阵快速幂,因为这个很像Fibonacci数列,所以我们考虑是矩阵,然后我们进行推公式,因为这样我们是无 ...

  10. Ruby Time类和Date类

    Time类 更新: 2017/06/23 更新了Data/Time在model模式下的便利方法 更新: 2018/10/12 修改了%Y相关描述防止误解  年月日时分秒,时区    生成  获取当前时 ...