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 相关文章推荐
不懂JavaScript应该怎样学
Apr 16 Javascript
9个JavaScript评级/投票插件
Jan 18 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 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中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python字符串中查找子串小技巧
2015/04/10 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
python2.7实现爬虫网页数据
2018/05/25 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
附答案的Java面试题
2012/11/19 面试题
制药工程专业个人求职自荐信
2014/01/25 职场文书
捐款倡议书范文
2014/02/02 职场文书
英语专业自荐书
2014/06/13 职场文书
关于颐和园的导游词
2015/01/30 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
JS监听Esc 键触发事键
2021/04/14 Javascript
使用numpy nonzero 找出非0元素
2021/05/14 Python