vue-router 起步步骤详解


Posted in Javascript onMarch 26, 2019

1.在main.js中导入vue-router和组件

import VueRouter from 'vue-router'; // 导入vue-router并将它命名为VueRouter
import goods from './components/goods/goods'; // 引入组件
import seller from './components/seller/seller';

2.为组件设置URL,通过url可以动态的加载组件

const urls = [
 { path: '/goods', component: goods },
 { path: '/rating', component: rating },
 { path: '*', redirect: '/goods' } //无效路径重点向到'/goods'
];//定义一个常量来将url和组件绑定起来

3.配置vue-router对象并挂载

const router = new VueRouter( //新建一个vue-router对象
 {
  routes: urls  将组件 (components) 映射到路由 (routes),
 }
);
 new Vue({
  el: '#app',
  router, //注册你新建的vue-router对象
 render: h => h(App)
});

4.配置连接的出口,实现动态的加载组件

<router-view></router-view> //通过模板中放置元素来确定vue-router渲染组件的位置

vue-router 起步步骤详解

现在,可以通过url动态加载我们的组件

vue-router 起步步骤详解

vue-router 起步步骤详解

5.将连接入口,挂载到网页上

<router-link to="/goods">商品</router-link> //本质上是个a标签,to关联了跳转的url

vue-router 起步步骤详解

可以通过点击商品和评论完成页面局部的刷新

vue-router 起步步骤详解

vue-router 起步步骤详解

步骤总结

1.在main.js中导入vue-router和自定义的组件
2.常量定义url和组件的关联
3.创建vue-router对象并导入组件关系,并注册
4.在模板中定义渲染的出口 <router-view></router-view> 和入口<router-link to=" ">商品</router-link>
官方起步文档:https://router.vuejs.org/zh/guide/#html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
jquery $.ajax相关用法分享
Mar 16 Javascript
JavaScript?Apple设备检测示例代码
Nov 15 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
js仿小米官网图片轮播特效
Sep 29 Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 Javascript
JavaScript表单验证实现代码
May 22 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 #Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 #Javascript
详解用JS添加和删除class类名
Mar 25 #Javascript
详解javascript设计模式三:代理模式
Mar 25 #Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 #Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 #Javascript
9102了,你还不会移动端真机调试吗
Mar 25 #Javascript
You might like
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
python做量化投资系列之比特币初始配置
2018/01/23 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
JAVA代码查错题
2014/10/10 面试题
继承权公证书
2014/04/09 职场文书
供电工程专业求职信
2014/08/09 职场文书
爱的教育读书笔记
2015/06/26 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
创业计划书之美甲店
2019/09/20 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
MySQL系列之十二 备份与恢复
2021/07/02 MySQL