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 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
jquery 最简单易用的表单验证插件
Feb 27 Javascript
javascript控制swfObject应用介绍
Nov 29 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
微信小程序之购物车功能
Sep 23 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
JS数据类型判断的几种常用方法
Jul 07 Javascript
jQuery冲突问题解决方法
Jan 19 jQuery
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
构建简单的Webmail系统
2006/10/09 PHP
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
php文本转图片自动换行的方法
2013/03/13 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
33道php常见面试题及答案
2015/07/06 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
Python内置加密模块用法解析
2019/11/25 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
初中校园之声广播稿
2014/01/15 职场文书
青年教师培训方案
2014/02/06 职场文书
餐厅总厨求职信
2014/03/04 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
银行求职信模板
2015/03/20 职场文书
培训后的感想
2015/08/07 职场文书