前言

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

方法如下：

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

2、创建组件

两种写法

第一种：间接

第二种：直接

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

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

整体的demo

<template id="home">

<h1>Home</h1>

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

<template id="about">

<h1>about</h1>

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

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

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

<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: '

});

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

var router = new VueRouter({

routes: [

{ path: '/home',component: Home },{ path: '/about',component: About },{ path: '/out',component: Out },{path: '/',//设置默认路径

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

]

});

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

var vm = new Vue({

router: router 

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

// 现在，应用已经启动了！

关于路由嵌套

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

如下：

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

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

总结

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!