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 相关文章推荐
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
AngularJS入门教程引导程序
Aug 18 Javascript
Node.js简单入门前传
Aug 21 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 Javascript
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 一个随机字符串生成代码
2010/05/26 PHP
php与paypal整合方法
2010/11/28 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
python避免死锁方法实例分析
2015/06/04 Python
Python导出DBF文件到Excel的方法
2015/07/25 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
django使用多个数据库的方法实例
2021/03/04 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
临床医学专业个人的自我评价
2013/09/27 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
幼儿园教学管理制度
2014/02/04 职场文书
2014司机年终工作总结
2014/12/05 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
css样式important规则的正确使用方式
2022/06/10 HTML / CSS