vue router2.0二级路由的简单使用


Posted in Javascript onJuly 05, 2017

本文实例为大家分享了vue router2.0二级路由的具体代码,供大家参考,具体内容如下

1、app.vue中

<template>
 <div id="app">
  <router-view></router-view>
 </div>
</template>

2、router中index.js(路由的路径配置)

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Login from '@/components/Login'
import index from '@/components/index'
import Header from '@/components/Header/Header'
import Product from '@/components/Product/Product'

Vue.use(Router)

export default new Router({
 routes: [
  {
   path: '/',
   name: 'Login',
   component: Login
  },
  {
   path: '/index',
   name: 'index',
   component: index,
   children: [ //这里就是二级路由的配置
    {
     path: '/hello',
     name: 'Hello',
     component: Hello
    },
    {
     path: '/header',
     name: 'Header',
     component: Header
    },
    {
     path: '/product',
     name: 'Product',
     component: Product
    }
   ]
  }
 ]
})

3、下面是我们的index.vue中的代码

<template>
 <div class="aaa">
  <div class="list-group">
    <router-link to="/hello">Go to hello</router-link>
    <router-link to="/header">Go to header</router-link>
    <router-link to="/product">Go to product</router-link>
    <input type="text" v-model="username">
    <button v-click="text"></button>
    <router-view></router-view>
  </div>
 </div>
</template>

4、最后就是新建hello、header、product这几个组件来验证我们的效果,这里就不做演示了,因为我自己已经测试过了,没有问题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
基于jquery实现状态限定编辑的代码
Feb 11 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 #Javascript
AngularJS实现进度条功能示例
Jul 05 #Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 #Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 #Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 #jQuery
jQuery常见面试题之DOM操作详析
Jul 05 #jQuery
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 #Javascript
You might like
Apache服务器无法使用的解决方法
2013/05/08 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
python中xrange和range的区别
2014/05/13 Python
Python解决鸡兔同笼问题的方法
2014/12/20 Python
Python中使用dom模块生成XML文件示例
2015/04/05 Python
python连接数据库的方法
2017/10/19 Python
Python Logging 日志记录入门学习
2018/06/02 Python
通过cmd进入python的实例操作
2019/06/26 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
EJB timer的种类
2014/10/28 面试题
酒店保洁主管岗位职责
2013/11/28 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
物控部经理职务说明书
2014/02/25 职场文书
火箭队口号
2014/06/18 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
禁毒心得体会范文
2016/01/15 职场文书
nginx lua 操作 mysql
2022/05/15 Servers
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers