<!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. 头文件与cpp文件为什么要分开写

    最表面的机制是: 头文件是程序的界面(是代码界面),提供给程序员以  类.模版.函数等一系列的声明,让程序员知道应该怎么调用里面的"东西". 从动态链接库的角度看: 头文件提供界面 ...

  2. CAS和ABA

    1 CAS compare and swap的缩写,详见乐观锁和悲观锁. 2 ABA 就是说,我获取的旧值是A,然后被人修改成了B,但是又被人修改成了A,我就认为并没有修改,更新内存. 解决办法,给每 ...

  3. 使用ADO.NET对SQL Server数据库进行訪问

    在上一篇博客中我们给大家简介了一下VB.NET语言的一些情况,至于理论知识的学习我们能够利用VB的知识体系为基础.再将面向对象程序设计语言的知识进行融合便可进行编程实战. 假设我们须要訪问一个企业关系 ...

  4. 四:网络--NSURLConnection基本使用

    一.NSURLConnection的常用类 (1)NSURL:请求地址 (2)NSURLRequest:封装一个请求,保存发给服务器的全部数据,包括一个NSURL对象,请求方法.请求头.请求体.... ...

  5. uwsgi 配置 初试

    /************************************************************************************** * uwsgi 配置 初 ...

  6. bzoj 2744 朋友圈

    题目大意: 两个国家 各有A和B个人,每个人有一个数值. 若两个A国的人满足$val_i\space xor \space val_j \mod 2 =1$ 则他们为朋友 若两个B国的人满足$val_ ...

  7. luogu 3804 【模板】后缀自动机

    学习一波后缀自动机 求字符串$S$的所有出现次数不为1的子串的出现次数乘上该子串长度的最大值 #include<iostream> #include<cstdio> #incl ...

  8. AutoIT: 对数据库的访问，数据提取操作

    #include<array.au3> $conn= ObjCreate("ADODB.Connection") $RS= ObjCreate("ADODB. ...

  9. python调用window dll和linux so例子

    #!/usr/bin/python# -*- coding: UTF-8 -*-#python dll.pyimport win32api# 打开记事本程序,在后台运行,即显示记事本程序的窗口win3 ...

  10. ubuntu搭建开发环境踩坑实录

    谨以此文,记录和ubuntu系统不死不休的搏斗过程,后续待补. 1.双系统安装,windows采用uefi模式安装(优启通可制作uefi的win10安装盘),ubuntu不要划分boot区,而应该划分 ...