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 相关文章推荐
jQuery实现鼠标经过图片预览大图效果
Apr 10 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
Underscore源码分析
Dec 30 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 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性能的原理介绍
2012/09/05 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
跟老齐学Python之数据类型总结
2014/09/24 Python
简化Python的Django框架代码的一些示例
2015/04/20 Python
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
婚礼主持词开场白
2014/03/13 职场文书
加入学生会演讲稿
2014/04/24 职场文书
市场推广策划方案
2014/06/02 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python
golang的文件创建及读写操作
2022/04/14 Golang
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技