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 相关文章推荐
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
jquery图片滚动放大代码分享(1)
Aug 25 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
比Jquery的document.ready更快的方法
2010/04/28 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
vue 子组件向父组件传值方法
2018/02/26 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
原生js实现购物车功能
2020/09/23 Javascript
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
python 实现list或string按指定分段
2019/12/25 Python
python 如何快速复制序列
2020/09/07 Python
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
网上书店创业计划书
2014/01/12 职场文书
推荐信模板
2014/05/09 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
2015毕业寄语大全
2015/02/26 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
居安思危观后感
2015/06/11 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技