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 相关文章推荐
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
Oct 25 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 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
PHP5 面向对象程序设计
2008/02/13 PHP
初学CAKEPHP 基础教程
2009/11/02 PHP
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
javascript 特殊字符串
2009/02/25 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
javascript基本语法
2016/05/31 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Django 内置权限扩展案例详解
2019/03/04 Python
python读取并写入mat文件的方法
2019/07/12 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
Python requests获取网页常用方法解析
2020/02/20 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
ORACLE十问
2015/04/20 面试题
自我评价范文点评
2013/12/04 职场文书
就业自荐书
2013/12/05 职场文书
秘书英文求职信范文
2014/01/31 职场文书
软件项目开发计划书
2014/05/01 职场文书
施工安全汇报材料
2014/08/17 职场文书
金砖之国观后感
2015/06/11 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL