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 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
简单的js表单验证函数
Oct 28 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
js实现有趣的倒计时效果
Jan 19 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执行速度全攻略(上)
2006/10/09 PHP
PHP similar_text 字符串的相似性比较函数
2010/05/26 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
php阻止页面后退的方法分享
2014/02/17 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
python同步两个文件夹下的内容
2019/08/29 Python
pygame实现飞机大战
2020/03/11 Python
Python是怎样处理json模块的
2020/07/16 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
中专毕业生的自我鉴定
2013/12/01 职场文书
银行贷款收入证明
2014/10/17 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
投标单位介绍信
2015/05/05 职场文书
原告代理词范文
2015/05/25 职场文书
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android