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 相关文章推荐
js 效率组装字符串 StringBuffer
Dec 23 Javascript
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
node.js 动态执行脚本
Jun 02 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
vue实现购物车结算功能
Jun 18 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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
修改jQuery Validation里默认的验证方法
2012/02/14 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
js生成word中图片处理方法
2018/01/06 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
Python全局变量操作详解
2015/04/14 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
pytorch中的inference使用实例
2020/02/20 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
开办饭店创业计划书
2013/12/28 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
节能减排倡议书
2014/04/15 职场文书
教师教学评估方案
2014/05/09 职场文书
医生个人年终总结
2015/02/28 职场文书
第一军规观后感
2015/06/12 职场文书
工商局调档介绍信
2015/10/22 职场文书
golang中的空slice案例
2021/04/27 Golang
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏