vue 2.0路由之路由嵌套示例详解


Posted in Javascript onMay 08, 2017

前言

vue一个重要的方面就是路由,下面是自己写的一个路由的例子分享给大家供大家参考学习,下面来看看详细的介绍。

方法如下:

1、引入依赖库就不必再说

2、创建组件

两种写法

第一种:间接

<template id="home">

 <div>

  <h1>Home</h1>

  <p>{{msg}}</p>

 </div>

 </template>
var About = Vue.extend({

   template: '#about'

  });

第二种:直接

var Out = Vue.extend({

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

  });

3、创建 router 实例,传 'routes'路由映射配置

var router = new VueRouter({

   routes: [

   { path: '/路径', component: 组件名 },

    { path: '/', component: 组件名}, //设置默认路径


 { path: "*", component:Home }//路径不存在   <br>

] 

 });

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

var vm = new Vue({

    router: router 

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

整体的demo

<!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>

   <router-link to="/out">Go to Out</router-link>

  </div>

 

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

  <!--这里显示的是展示的界面-->

  <router-view></router-view>   

 </div>

  

 <template id="home">

   <div>

    <h1>Home</h1>

    <p>{{msg}}</p>

   </div>

 </template>

 <template id="about">

   <div>

    <h1>about</h1>

    <p>This is the tutorial about vue-router.</p>

   </div>

 </template>

  

   

 

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

 <script src="../js/vue2.0.js" type="text/javascript" charset="utf-8"></script>

<script src="lib/vue-router.min.js" type="text/javascript" charset="utf-8"></script>

 <script type="text/javascript">

  /* 1、创建组件 */

  var Home = Vue.extend({

   template: '#home',

   data: function() {

    return {

     msg: 'Hello, vue router!'

    }

   }

  });

  var About = Vue.extend({

   template: '#about'

  });

  var Out = Vue.extend({

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

  });

 

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

  var router = new VueRouter({

   routes: [

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

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

    { path: '/out', component: Out },

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

   { path: "*", component:Home }//路径不存在

   

   ]

  });

 

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

  var vm = new Vue({

    router: router 

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

 

  // 现在,应用已经启动了!

 </script>

</body>

</html>

关于路由嵌套

在配置routes映射时添加children配置

如下:

var router = new VueRouter({

 routes:[

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

   children:[//子路由

    {path:'news',component:News},

    {path:'change',component:change}    

  ]},

  {path:'/me',component:Me},

  {path:'/',component:Me}

  ]

 })

关于具体的demo可以参考GitHub上,另外还总结了一些自己最近在学习的阿里云上传图片等,会逐步更新,敬请指教!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
事件模型在各浏览器中存在差异
Oct 20 Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
node.js中EJS 模板快速入门教程
May 08 #Javascript
详解用node-images 打造简易图片服务器
May 08 #Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 #Javascript
angular实现IM聊天图片发送实例
May 08 #Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 #Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 #Javascript
详解JavaScript中return的用法
May 08 #Javascript
You might like
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
npm的lock机制解析
2019/06/20 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
python操作 hbase 数据的方法
2016/12/18 Python
Python3 伪装浏览器的方法示例
2017/11/23 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
Python中print和return的作用及区别解析
2019/05/05 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
如何清空python的变量
2020/07/05 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
毕业生自荐书
2014/02/03 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
中国梦口号
2014/06/13 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
金陵十三钗观后感
2015/06/04 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
python获取字符串中的email
2022/03/31 Python
选购到合适的激光打印机
2022/04/21 数码科技