Vue.js路由组件vue-router使用方法详解


Posted in Javascript onDecember 02, 2016

使用Vue.js + vue-router 创建单页应用是非常简单的。只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可。

一、普通方式基本例子:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue-router使用方法</title>
</head>
<body>
 <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>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router"></script>
 <script>

 // 1. 定义(路由)组件。
 // 可以从其他文件 import 进来
 const Foo = { template: '<div>foo</div>' }
 const Bar = { template: '<div>bar</div>' }

 // 2. 定义路由
 // 每个路由应该映射一个组件。 其中"component" 可以是
 // 通过 Vue.extend() 创建的组件构造器,
 // 或者,只是一个组件配置对象。
 const routes = [
 { path: '/foo', component: Foo },
 { path: '/bar', component: Bar }
 ]

 // 3. 创建 router 实例,然后传 `routes` 配置
 const router = new VueRouter({
 routes // (缩写)相当于 routes: routes
 })

 // 4. 创建和挂载根实例。
 // 记得要通过 router 配置参数注入路由,
 // 从而让整个应用都有路由功能
 const app = new Vue({
 router
 }).$mount('#app')

 // 现在,应用已经启动了!
 </script>
</body>
</html>

二、块化机制编程基本例子,以在vue-cli中的使用方法为例

安装vue-router插件

# npm install vue-router --save-dev

在src文件夹下面的components文件夹下新建Foo.vue、Bar.vue两个组件,在Foo组件写入以下内容

<template>
 <div>foo</div>
</template>

在Bar.vue组件中写入以下内容

<template>
 <div>bar</div>
</template>

打开src文件夹下面的app.vue文件,修改代码为

<template>
 <div id="app">
 <router-view
 class="view"
 keep-alive
 transition
 transition-mode="out-in">
 </router-view>
 </div>
</template>

这里用 router-view 来把刚才新建的两个页面加载到这里来,修改src文件夹下面的main.js文件

import Vue from 'vue'
import App from './App'
//引用路由插件
import VueRouter from 'vue-router'

//使用路由插件
Vue.use(VueRouter)

//引入组件 
import Foo from './components/Foo'
import Bar from './components/Bar'

const routes = [
 { path: '/foo/' , component: Foo },
 { path: '/bar/' , component: Bar },
]

//使用路由规则
const router = new VueRouter({
 routes
})
//加载路由规则
new Vue({
 router,
 el: '#app',
 render:h => h(App)
})

然后运行npm run dev查看效果吧。

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 Javascript
使用javascript获取页面名称
Dec 23 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 Javascript
搭建Bootstrap离线文档的方法
Dec 02 #Javascript
巧用Javascript的逻辑运算符
Dec 02 #Javascript
Vue.js第四天学习笔记(组件)
Dec 02 #Javascript
Javascript之面向对象--接口
Dec 02 #Javascript
Javascript之面向对象--封装
Dec 02 #Javascript
JavaScript制作弹出层效果
Dec 02 #Javascript
Javascript之面向对象--方法
Dec 02 #Javascript
You might like
php启用zlib压缩文件的配置方法
2013/06/12 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
调整PHP的性能
2013/10/30 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
List the Codec Files on a Computer
2007/06/11 Javascript
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
jQuery Ajax之load()方法
2009/10/12 Javascript
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
python实现员工管理系统
2018/01/11 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
python3.5的包存放的具体路径
2020/08/16 Python
Python ellipsis 的用法详解
2020/11/20 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
婚前财产公证书
2014/04/10 职场文书
2015元旦节寄语
2014/12/08 职场文书
第二次离婚起诉书
2015/05/18 职场文书
Python快速实现一键抠图功能的全过程
2021/06/29 Python