vue2.0 和 vue1.0 路由的语法还是有点稍微的差别，下面介绍一下vue-router 2的简单实例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>hello world</title>

</head>

<body>

    <div id="app">

        <div>

            <!-- 4、<router-link>默认会被渲染成一个 `<a>` 标签 ,to指令跳转到指定路径 -->

            <router-link to="/home">Go to Home</router-link>

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

        </div>

        <!-- 5、在页面上使用<router-view></router-view>标签，用于渲染匹配的组件 -->

        <router-view></router-view>

    </div>

    <!-- 0、引入依赖库 -->

    <script src="../js/vue.min.js"></script>

    <script src="../js/vue-router.min.js"></script>

    <script type="text/javascript">

        /* 1、创建组件 */

        const Home = Vue.extend({

            template: '<div><h1>Home</h1><p>{{msg}}</p></div>',

            data: function() {

                return {

                    msg: 'Hello, vue router!'

                }

            }

        });

        const About = Vue.extend({

            template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'

        });

        // 2. 创建 router 实例，然后传 `routes`路由映射 配置

        const router = new VueRouter({

          routes: [

            { path: '/home', component: Home },

              { path: '/about', component: About },

              { path: '/', component: Home } //设置默认路径

          ]

        });

        // 3. 创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能

        const vm = new Vue({

              router: router

        }).$mount('#app');

        // 现在，应用已经启动了！

    </script>

</body>

</html>

运行结果如下：

点击不同的链接，切换到不同组件，显示组件的相应内容

更多vue-router 2 的使用方法，请单击这里

vue路由的简单实例的更多相关文章

  1. Vue 路由的简单使用(命名路由、query路由传参、params路由传参)

    1 # Vue 路由 2 # 1.理解:一个路由(toute)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理 3 # 2.前端路由:key是路径,value是组件 ...

  2. vue.js路由参数简单实例讲解------简单易懂

    vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们 ...

  3. vue - 简单实例(vue-router + webpack + vuex)

    分享 + 实践  基于公司部分产品技术栈转型使用vue,部分同事需要学习一下,快速上手,那么我很荣幸的成为了给大家分享vue技术栈的‘ ’导师‘,在这里我分享一下: 讲解大纲为:(我是有一份PPT的, ...

  4. 10.3 Vue 路由系统

     Vue 路由系统  简单示例 main.js  import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...

  5. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

  6. Vue.js—组件快速入门及Vue路由实例应用

    上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...

  7. 简单实例一步一步帮你搞清楚MVC3中的路由以及区域

    我们都知道MVC 3 程序的所有请求都是先经过路由解析然后分配到特定的Controller 以及 Action 中的,为什么这些知识讲完了Controller Action Model 后再讲呢?这个 ...

  8. vue.js最最最最简单实例

    vue.js最最最最简单实例 一.总结 一句话总结: 1.vue.js实现实现数据的双向绑定用的是什么标记? 双大括号:比如{{message}} 2.vue数据循环输出的标记是什么? 用的是标签的v ...

  9. 简单配置Vue路由

    简单配置Vue路由 1.  创建一个单文件组件Test.vue <template> <div>Test</div> </template> <s ...

随机推荐

  1. js屏蔽浏览器右键菜单,粘贴,复制,剪切,选中（转）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. CentOS 7部署OpenStack（二）—安装keystone服务

    1.创建数据库 [root@controller ~]# mysql -u root -p [root@controller ~]# CREATE DATABASE keystone; [root@c ...

  3. 用php怎么改文件名

    php手册:bool rename ( string oldname, string newname [, resource context] )尝试把 oldname 重命名为 newname. 如 ...

  4. Web 开发人员系统重装备忘录

    准备工作: 一.配置IIS 软件安装: 一.大块头: 1.VS2005 1.VS2005SP1 2.VSS 2005 2.VS2008 1.VS2008TeamExplorer 2.VS2008SP1 ...

  5. mysql数据引擎的概念介绍

    什么是数据库引擎?每种数据库的数据格式,内部实现机制都是不同的,要利用一种开发工具访问一种数据库,就必须通过一种中介程序,这种开发工具与数据库之间的中介程序就叫数据库引擎. 如果你是个赛车手并且按一下 ...

  6. java封装学习

    封装:将类的某些信息隐藏在类内部,不允许外部程序直接访问,而是通过该类提供的方法来实现对隐藏信息的操作和访问.把过程和数据包围起来,对数据的访问只能通过已定义的接口. 在java中通过关键字priva ...

  7. 回车与换行 ---编码等相关讨论----由notepad++ 批量替换 引发的讨论，转义字符也是人为硬性规定的。

    ,

  8. 深入jQuery中的data()

    引入 data函数在jQuery中看起来很不起眼, 就像沙滩上一颗平凡的沙子, 但仔细一瞅, 却惊讶的发现data是jQuery中无比重要的一环, 甚至jQuery中各种事件都基于此. data有什么 ...

  9. nodejs安装心得

    首先下载nodejs,http://nodejs.org/download/ 配置系统环境变量 管理员运行cmd, 输入命令 node -v 查看版本 安装npm Npm安装命令 npm-1.3.15 ...

  10. prolog --寻找neni (2)

    混合查询 我们可以把简单的查询连接起来,组成复杂的查询. ?- location(X,kitchen),edible(X). 简单查询只有一个目标,而混合查询可以把这些目标连接起来.从而进行较为复杂的 ...