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 相关文章推荐
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
React组件的三种写法总结
Jan 12 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 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
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
微信小程序实现tab页面切换功能
2018/07/13 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
工程开工庆典邀请函
2014/02/01 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
超市采购员岗位职责
2015/04/07 职场文书