vue.js中Vue-router 2.0基础实践教程


Posted in Javascript onMay 08, 2017

前言

Vue.js的一大特色就是构建单页面应用十分方便,既然要方便构建单页面应用那么自然少不了路由,vue-router就是vue官方提供的一个路由框架。本文主要介绍了Vue-router 2.0的相关内容,分享出来供大家参考学习,下面来看看详细的介绍:

一、基础用法:

<div id="app"> 
 <h1>Hello App!</h1> 
 <p> 
  <!-- 使用 router-link 组件来导航. --> 
  <!-- 通过传入 `to` 属性指定链接. --> 
  <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> 
  <router-link to="/foo">Go to Foo</router-link> 
  <router-link to="/bar">Go to Bar</router-link> 
 </p> 
 <!-- 路由出口 --> 
 <!-- 路由匹配到的组件将渲染在这里 --> 
 <router-view></router-view> 
</div> 
 
<template id='foo'> 
 <p>this is foo!</p> 
</template> 
<template id='bar'> 
 <p>this is bar!</p> 
</template>
// 1. 定义(路由)组件。 
// 可以从其他文件 import 进来 
const Foo = { template:'#foo' }; 
const Bar = { template:'#bar' }; 
// 2. 定义路由 
// 每个路由应该映射一个组件。 其中"component" 可以是 
// 通过 Vue.extend() 创建的组件构造器, 
// 或者,只是一个组件配置对象。 
const routes = [ 
 { path: '/foo', component: Foo }, 
 { path: '/bar', component: Bar } 
]; 
// 3. 创建 router 实例,然后传 `routes` 配置 
// 你还可以传别的配置参数, 不过先这么简单着吧。 
const router = new VueRouter({ routes:routes }); 
// 4. 创建和挂载根实例。 
// 记得要通过 router 配置参数注入路由, 
// 从而让整个应用都有路由功能 
const app = new Vue({ router:router }).$mount('#app');

二、动态路由匹配:

<div id="app"> 
 <h1>Hello App!</h1> 
 <p> 
  <router-link to="/user/foo/post/123">Go to Foo</router-link> 
  <router-link to="/user/bar/post/456">Go to Bar</router-link> 
 </p> 
 <router-view></router-view> 
</div> 
 
<template id='user'> 
 <p>User:{{ $route.params.id }},Post:{{$route.params.post_id}}</p> 
</template>
// 1. 定义组件。 
const User = { 
 template:'#user', 
 watch:{ 
  '$route'(to,from){ 
   console.log('从'+from.params.id+'到'+to.params.id); 
  } 
 } 
}; 
// 2. 创建路由实例 (可设置多段路径参数) 
const router = new VueRouter({ 
 routes:[ 
  { path:'/user/:id/post/:post_id',component:User } 
 ] 
}); 
//3. 创建和挂载根实例 
const app = new Vue({ router:router }).$mount('#app');

三、嵌套路由:

<div id="app"> 
 <h1>Hello App!</h1> 
 <p> 
  <router-link to="/user/foo">Go to Foo</router-link> 
  <router-link to="/user/foo/profile">Go to profile</router-link> 
  <router-link to="/user/foo/posts">Go to posts</router-link> 
 </p> 
 <router-view></router-view> 
</div> 
 
<template id='user'> 
 <div> 
  <h2>User:{{ $route.params.id }}</h2> 
  <router-view></router-view> 
 </div> 
</template> 
 
<template id="userHome"> 
 <p>主页</p> 
</template> 
 
<template id="userProfile"> 
 <p>概况</p> 
</template> 
 
<template id="userPosts"> 
 <p>登录信息</p> 
</template>
// 1. 定义组件。 
const User = { 
 template:'#user' 
}; 
const UserHome = { 
 template:'#userHome' 
}; 
const UserProfile = { 
 template:'#userProfile' 
}; 
const UserPosts = { 
 template:'#userPosts' 
}; 
// 2. 创建路由实例 
const router = new VueRouter({ 
 routes:[ 
  { path:'/user/:id', component:User, 
   children:[ 
    // 当 /user/:id 匹配成功, 
    // UserHome 会被渲染在 User 的 <router-view> 中 
    { path: '', component: UserHome}, 
    // 当 /user/:id/profile 匹配成功, 
    // UserProfile 会被渲染在 User 的 <router-view> 中 
    { path:'profile', component:UserProfile }, 
    // 当 /user/:id/posts 匹配成功 
    // UserPosts 会被渲染在 User 的 <router-view> 中 
    { path: 'posts', component: UserPosts } 
   ] 
  } 
 ] 
}); 
//3. 创建和挂载根实例 
const app = new Vue({ router:router }).$mount('#app');

四、编程式路由:

<div id="app"> 
 <h1>Hello App!</h1> 
 <p> 
  <router-link to="/user/foo">Go to Foo</router-link> 
 </p> 
 <router-view></router-view> 
</div> 
 
<template id='user'> 
 <h2>User:{{ $route.params.id }}</h2> 
</template> 
 
<template id="register"> 
 <p>注册</p> 
</template>
// 1. 定义组件。 
const User = { 
 template:'#user' 
}; 
const Register = { 
 template:'#register' 
}; 
// 2. 创建路由实例 
const router = new VueRouter({ 
 routes:[ 
  { path:'/user/:id', component:User }, 
  { path:'/register', component:Register } 
 ] 
}); 
//3. 创建和挂载根实例 
const app = new Vue({ router:router }).$mount('#app'); 
 
//4.router.push(location) 
router.push({ path: 'register', query: { plan: 'private' }});

五、命名路由:

<div id="app"> 
 <h1>Named Routes</h1> 
 <p>Current route name: {{ $route.name }}</p> 
 <ul> 
  <li><router-link :to="{ name: 'home' }">home</router-link></li> 
  <li><router-link :to="{ name: 'foo' }">foo</router-link></li> 
  <li><router-link :to="{ name: 'bar', params: { id: 123 }}">bar</router-link></li> 
 </ul> 
 <router-view class="view"></router-view> 
</div> 
 
<template id='home'> 
 <div>This is Home</div> 
</template> 
 
<template id='foo'> 
 <div>This is Foo</div> 
</template> 
 
<template id='bar'> 
 <div>This is Bar {{ $route.params.id }}</div> 
</template>
const Home = { template: '#home' }; 
const Foo = { template: '#foo' }; 
const Bar = { template: '#bar' }; 
 
const router = new VueRouter({ 
 routes: [ 
  { path: '/', name: 'home', component: Home }, 
  { path: '/foo', name: 'foo', component: Foo }, 
  { path: '/bar/:id', name: 'bar', component: Bar } 
 ] 
}); 
 
new Vue({ router:router }).$mount('#app');

六、命名视图:

<div id="app"> 
 <router-link to="/">Go to Foo</router-link> 
 <router-view class="view one"></router-view> 
 <router-view class="view two" name="a"></router-view> 
 <router-view class="view three" name="b"></router-view> 
</div> 
 
<template id='foo'> 
 <div>This is Foo</div> 
</template> 
 
<template id='bar'> 
 <div>This is Bar {{ $route.params.id }}</div> 
</template> 
 
<template id='baz'> 
 <div>This is baz</div> 
</template>
const Foo = { template: '#foo' }; 
const Bar = { template: '#bar' }; 
const Baz = { template: '#baz' }; 
 
const router = new VueRouter({ 
 routes: [ 
  { 
   path: '/', 
   components: { 
    default:Foo, 
    a:Bar, 
    b:Baz 
   } 
  } 
 ] 
}); 
 
new Vue({ router:router }).$mount('#app');

总结

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

Javascript 相关文章推荐
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
javascript继承机制实例详解
Nov 20 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
javascript实现控制div颜色
Jul 07 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
angular实现IM聊天图片发送实例
May 08 #Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 #Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 #Javascript
详解JavaScript中return的用法
May 08 #Javascript
如何使用angularJs
May 08 #Javascript
关于foreach循环中遇到的问题小结
May 08 #Javascript
js下载文件并修改文件名
May 08 #Javascript
You might like
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
Vue中插入HTML代码的方法
2018/09/21 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
python实现隐马尔科夫模型HMM
2018/03/25 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
求职个人评价范文
2014/04/09 职场文书
供货协议书
2014/04/22 职场文书
旅游安全责任协议书
2016/03/22 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
springboot中一些比较常用的注解总结
2021/06/11 Java/Android