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 相关文章推荐
实现复选框全选/全不选切换
Dec 23 Javascript
js CSS操作方法集合
Oct 31 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 Javascript
vue-router 中 meta的用法详解
Nov 01 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 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中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
详解php中的implements 使用
2017/06/13 PHP
tagName的使用,留一笔
2006/06/26 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
javascript类型转换示例
2014/04/29 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
JavaScript从原型到原型链深入理解
2019/06/03 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
python 判断网络连通的实现方法
2018/04/22 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
店长岗位职责
2013/11/21 职场文书
司机辞职报告范文
2014/01/20 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
给客户的感谢信
2015/01/21 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
pytorch fine-tune 预训练的模型操作
2021/06/03 Python