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 相关文章推荐
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
JS定义回车事件(实现代码)
Jul 08 Javascript
js中window.open打开一个新的页面
Aug 10 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
Node.js API详解之 zlib模块用法分析
May 19 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
搭建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
老照片 - 几十年前的收音机与人
2021/03/02 无线电
php实现修改新闻时删除图片的方法
2015/05/12 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
Python实现感知器模型、两层神经网络
2017/12/19 Python
python matplotlib画图实例代码分享
2017/12/27 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
python实现大量图片重命名
2020/03/23 Python
python openCV自制绘画板
2020/10/27 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
通息工程毕业生自荐信
2013/10/16 职场文书
思想汇报范文
2013/11/04 职场文书
商务日语毕业生自荐信
2013/11/23 职场文书
品质主管的岗位职责
2013/12/04 职场文书
微型企业创业投资计划书
2014/01/10 职场文书
运动会广播稿400字
2014/01/25 职场文书
卫生安全检查制度
2014/02/04 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
镇创先争优活动总结
2014/08/28 职场文书
开会通知
2015/04/20 职场文书
学校安全管理制度
2015/08/06 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
Redis基本数据类型List常用操作命令
2022/06/01 Redis