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 相关文章推荐
在textarea中屏蔽js的某个function的javascript代码
Apr 20 Javascript
javascript Select标记中options操作方法集合
Oct 22 Javascript
jquery ready(fn)事件使用介绍
Aug 21 Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 Javascript
JS清除选择内容的方法
Jan 29 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 Javascript
vue.js 使用原生js实现轮播图
Apr 26 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中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
php文件下载处理方法分析
2015/04/22 PHP
php header函数的常用http头设置
2015/06/25 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
关于jQuery中的end()使用方法
2011/07/10 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python探索之ModelForm代码详解
2017/10/26 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
python中append函数用法讲解
2020/12/11 Python
关于Python错误重试方法总结
2021/01/03 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
总账会计岗位职责
2014/03/13 职场文书
家长会后的感想
2015/08/11 职场文书
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android