<!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. iptraf 网卡 ip 端口 监控 netstat 关闭端口方法

    18 commands to monitor network bandwidth on Linux server – BinaryTides https://www.binarytides.com/l ...

  2. ps -ef | grep

    ps -ef | grep java   查看所有关于java的进程 root     17540     1  0  2009 ?        01:42:27 /usr/java/jdk1.5. ...

  3. 常用的Sublime Text插件及安装方法

    Package Control 功能:安装包管理 简介:sublime插件控制台,提供添加.删除.禁用.查找插件等功能 使用:https://sublime.wbond.net/installatio ...

  4. Mac mysql 运行sql文件中文乱码的问题

    别再傻傻的改什么mysql的编码格式了. 是.sql文件的编码有问题,把sql文件的编码格式改成utf-8就行了. mac怎么修改呢? vscode最爽了. 用vscode打开.sql文件,然后点右下 ...

  5. Javaweb项目中文乱码

    Javaweb项目中文乱码 一.了解常识: 1.UTF-8国际编码,GBK中文编码.GBK包含GB2312,即如果通过GB2312编码后可以通过GBK解码,反之可能不成立; 2.web tomcat: ...

  6. codeforces 688D D. Remainders Game(中国剩余定理)

    题目链接: D. Remainders Game time limit per test 1 second memory limit per test 256 megabytes input stan ...

  7. window切换Java版本原因

    查找Path环境变量的变量指向的目录,有一个Oracle目录存放着几个 java,javac等可执行文件,删除这个路径或文件就可以执行你指定的JavaHome目录拉 详情参考: https://blo ...

  8. 【插件开发】—— 10 JFace开发详解

    前文回顾: 1 插件学习篇 2 简单的建立插件工程以及模型文件分析 3 利用扩展点,开发透视图 4 SWT编程须知 5 SWT简单控件的使用与布局搭配 6 SWT复杂空间与布局搭配 7 SWT布局详解 ...

  9. （矩阵快速幂）51NOD 1242斐波那契数列的第N项

    斐波那契数列的定义如下:   F(0) = 0 F(1) = 1 F(n) = F(n - 1) + F(n - 2) (n >= 2)   (1, 1, 2, 3, 5, 8, 13, 21, ...

  10. 我的spring cloud项目历程（2018.3~2018.9）

    前言 今天是9月17日,趁着山竹的临幸,得以在家里舒适的办公.项目从3月底开始,至今刚好半年.抽几十分钟,总结下半年的历程.对后面的项目,应该也有一点帮助吧. 学习前的七个问题 项目开始前,由于某些特 ...