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 相关文章推荐
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
详解js树形控件—zTree使用总结
Dec 28 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
分享一个精简的vue.js 图片lazyload插件实例
Mar 13 Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
JS实现随机抽选获奖者
Nov 07 Javascript
js实现盒子滚动动画效果
Aug 09 Javascript
Vue监视数据的原理详解
Feb 24 Vue.js
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
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
彻底杜绝PHP的session cookie错误
2009/08/09 PHP
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
写出高质量的PHP程序
2012/02/04 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
JS target与currentTarget区别说明
2011/08/28 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
详解Python的Django框架中的中间件
2015/07/24 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
JSON Web Tokens的实现原理
2017/04/02 Python
python处理xml文件的方法小结
2017/05/02 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
Python包和模块的分发详细介绍
2020/06/19 Python
python try...finally...的实现方法
2020/11/25 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
一句话工作感言
2014/03/01 职场文书
艺人经纪人岗位职责
2014/04/15 职场文书
服务承诺书怎么写
2014/05/24 职场文书
工作自我推荐信范文
2015/03/25 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
JavaScript 数组去重详解
2021/09/15 Javascript
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server
pandas中pd.groupby()的用法详解
2022/06/16 Python