用Vue.js+vue-router创建单页应用是比较简单的。使用Vue.js时，我们就已经把组件组合成一个应用了，当你要把vue-router加进来，只要配置组件和路由映射，然后告诉vue-router在哪里渲染它们。举例：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

  </head>

  <body>

  <div id="app">

    <h1>Hello Vue-router!</h1>

    <p>

      <router-link to="/foo">Go to Foo</router-link>

      <router-link to="/bar">Go to Bar</router-link>

    </p>

    <router-view></router-view>

  </div>

  </body>

  <script src="http://cdn.bootcss.com/vue/2.0.0-rc.8/vue.js"></script>

  <script src="http://cdn.bootcss.com/vue-router/2.0.0-rc.7/vue-router.js"></script>

  <script>

    const Foo = { template: '<div>foo</div>' }

    const Bar = { template: '<div>bar</div>' }

    const routes = [

      { path: '/foo', component: Foo },

      { path: '/bar', component: Bar }

    ]

    const router = new VueRouter({

      routes // short for routes: routes

    })

    const app = new Vue({

      router

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

  </script>

</html>

结果：

动态路由匹配

可以在 vue-router 的路由路径中使用“动态路径参数”

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

  </head>

  <body>

  <div id="app">

    <h1>Hello Vue-router!</h1>

    <p>

      <router-link to="/foo/first">Go to First</router-link>

      <router-link to="/foo/second">Go to Second</router-link>

    </p>

    <router-view></router-view>

  </div>

  </body>

  <script src="http://cdn.bootcss.com/vue/2.0.0-rc.8/vue.js"></script>

  <script src="http://cdn.bootcss.com/vue-router/2.0.0-rc.7/vue-router.js"></script>

  <script>

    const Foo = { template: '<div>foo {{ $route.params.id }}</div>' }

    const routes = [

      { path: '/foo/:id', component: Foo },

    ]

    const router = new VueRouter({

      routes // short for routes: routes

    })

    const app = new Vue({

      router

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

  </script>

</html>

结果：

嵌套路由

URL中各段动态路径可以按某种结构对应嵌套各层组件。

例子：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

  </head>

  <body>

    <div id="app">

    <p>

      <router-link to="/user/foo">/user</router-link>

      <router-link to="/user/foo/profile">/user/profile</router-link>

      <router-link to="/user/foo/posts">/user/posts</router-link>

    </p>

    <router-view></router-view>

    </div>

  </body>

  <script src="http://cdn.bootcss.com/vue/2.0.0-rc.8/vue.js"></script>

  <script src="http://cdn.bootcss.com/vue-router/2.0.0-rc.7/vue-router.js"></script>

  <script>

    const User = {

      template:

      `

        <div class="user">

          <h2>User {{ $route.params.id }}</h2>

          <router-view></router-view>

        </div>

      `

    }

    const UserHome = { template: '<div>Home</div>' }

    const UserProfile = { template: '<div>Profile</div>' }

    const UserPosts = { template: '<div>Posts</div>' }

    const router = new VueRouter({

      routes: [

        { path: '/user/:id', component: User,

          children: [

            { path: '', component: UserHome },

            { path: 'profile', component: UserProfile },

            { path: 'posts', component: UserPosts }

          ]

        }

      ]

    });

    const app = new Vue({ router }).$mount('#app');

  </script>

</html>

结果：

vue-router(2.0)的更多相关文章

  1. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  2. vue router 只需要这么几步

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. Vue.js 2.x笔记：路由Vue Router（6）

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  4. vue cli 3.0创建项目

    .npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...

  5. 基于Vue.js 2.0 + Vuex打造微信项目

    一.项目简介 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面,实现了微信聊天.搜索.点赞.通讯录(快速导航).个人中心.模拟对话.朋友圈.设置等功能. 二. ...

  6. 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  7. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  8. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  9. python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  10. Vue Router的入门以及简单使用

    Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...

随机推荐

  1. Partition2：对表分区

    在SQL Server中,普通表可以转化为分区表,而分区表不能转化为普通表,普通表转化成分区表的过程是不可逆的,将普通表转化为分区表的方法是: 在分区架构(Partition Scheme)上创建聚集 ...

  2. 使用AWS亚马逊云搭建Gmail转发服务（三）

    title: 使用AWS亚马逊云搭建Gmail转发服务(三) author:青南 date: 2015-01-02 15:42:22 categories: [Python] tags: [log,G ...

  3. App你真的需要么

    随着智能手机.移动路联网的普及,APP火的一塌糊涂,APP应用可谓五花八门,街上经常看到各种推广:扫码安装送东西,送优惠券.仿佛一夜之间一个企业没有自己的APP就跟不上时代了. 有时我在想:APP,你 ...

  4. ASP.NET MVC5+EF6+EasyUI 后台管理系统（66）-MVC WebApi 用户验证 (2)

    系列目录 前言: 回顾上一节,我们利用webapi简单的登录并进行了同域访问与跨域访问来获得Token,您可以跳转到上一节下载代码来一起动手. 继续上一篇的文章,我们接下来演示利用拿到的Token来访 ...

  5. UWP开发之Mvvmlight实践七：如何查找设备（Mobile模拟器、实体手机、PC）中应用的Log等文件

    在开发中或者后期测试乃至最后交付使用的时候,如果应用出问题了我们一般的做法就是查看Log文件.上章也提到了查看Log文件,这章重点讲解下如何查看Log文件?如何找到我们需要的Packages安装包目录 ...

  6. CSS垂直居中的11种实现方式

    今天是邓呆呆球衣退役的日子,在这个颇具纪念意义的日子里我写下自己的第一篇博客,还望前辈们多多提携,多多指教! 接下来,就进入正文,来说说关于垂直居中的事.(以下这11种垂直居中的实现方式均为笔者在日常 ...

  7. 一个技术汪的开源梦 —— 公共组件缓存之分布式缓存 Redis 实现篇

    Redis 安装 & 配置 本测试环境将在 CentOS 7 x64 上安装最新版本的 Redis. 1. 运行以下命令安装 Redis $ wget http://download.redi ...

  8. Python 正则表达式入门（中级篇）

    Python 正则表达式入门(中级篇) 初级篇链接:http://www.cnblogs.com/chuxiuhong/p/5885073.html 上一篇我们说在这一篇里,我们会介绍子表达式,向前向 ...

  9. 【干货分享】流程DEMO-采购预算编制

    流程名: 采购预算编制  业务描述: 在月初由计财部进行预算编辑,提交审批后预算生效  流程相关文件: 流程包.xml WebService业务服务.xml WebService.asmx WebSe ...

  10. Android—基于GifView显示gif动态图片

    android中显示gif动态图片用到了开源框架GifView 1.拷GifView.jar到自己的项目中. 2.将自己的gif图片拷贝到drawable文件夹 3.在xml文件中设置基本属性: &l ...