<!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. java 内存简介

    java程序对内存分配的方式一般有三种: (1) 从静态存储区域分配.内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在.例如全局变量. (2) 在栈上创建. 在执行函数时,函数内局 ...

  2. mongodb09----replicattion set--健壮性

    replication set复制集 replicattion set 多台服务器维护相同的数据副本,提高服务器的可用性.一台是服务器出问题了另外2台还可以接收干,secondary平时保持只读状态, ...

  3. mongodb07---用户权限

    用户管理: 注意: 添加用户后,我们再次退出并登陆,发现依然可以直接读数据库? 原因: mongodb服务器启动时, 默认不是需要认证的. 要让用户生效, 需要启动服务器时,就指定 --auth 选项 ...

  4. redhat输入用户名密码后又跳回到登录

    一.如果忘记密码,可以进入single模式修改密码: 1.进入linux启动界面之后按e进入如下界面 2.按选择kernel /vmlinuz-2.4.20-8 ro root=LABEL=/ 项,按 ...

  5. BZOJ_2819_Nim_树状数组维护出栈入栈序

    BZOJ_2819_Nim_树状数组维护出栈入栈序 Description 著名游戏设计师vfleaking,最近迷上了Nim.普通的Nim游戏为:两个人进行游戏,N堆石子,每回合可以取其中某一堆的任 ...

  6. 【BZOJ 2456】 mode

    [题目链接] 点击打开链接 [算法] 此题初看是大水题,只需调用std :: sort即可 但是,n最大500000,显然会超时 而且,内存限制1MB,我们连数组也开不了! 那怎么做呢 ? 我们发现, ...

  7. 洛谷 P1344 追查坏牛奶Pollutant Control —— 最小割

    题目:https://www.luogu.org/problemnew/show/P1344 就是求最小割: 但是还要边数最小,所以把边权都*1001+1,这样原来流量部分是*1001,最大流一样的不 ...

  8. 分析函数Ratio_to_report使用

    分析函数Ratio_to_report( ) over()使用说明 表中需要计算单项占比:比如单项在部门占比多少,单项在公司占比多少.特别是在财务单项计算,部门个人薪水计算上. Ratio_to_re ...

  9. 算法复习周------“动态规划之‘最长公共子序列’”&&《计蒜课》---最长公共子串题解

    问题描述: 这个问题其实很容易理解.就是给你两个序列X={x1,x2,x3......xm} Y={y1,y2,y3......ym},要求找出X和Y的一个最长的公共子序列. 例:Xi={A, B, ...

  10. bzoj 2784: [JLOI2012]时间流逝【树形期望dp】

    来自lyd课件 发现s和last(s),next(s)成树结构,然后把式子化简成kx+b的形式,做树形dp即可 #include<iostream> #include<cstdio& ...