在vue-cli脚手架中配置一个vue-router前端路由


Posted in Javascript onJuly 03, 2017

前言

这篇文章给大家讲解的是在vue-cli脚手架中如何配置vue-router前端路由的相关内容,分享出来供打击参考学习,下面来一起看看详细的介绍:

首先你需要一个main.js文件

//然后引入vue-router
import VueRouter from 'vue-router';

//使用路由
Vue.use(VueRouter);

//当然如果需要有组件进来的时候也是需要引入的
import Home from '../components/Home.vue';
import News from '../components/News.vue';
import List from '../components/List.vue';

//创建路由实例
const router = new VueRouter({
 routes: [
  {path:'/home',component:Home},
  //path:路径 component:把你需要的组件挂载进来
  {
   path:'/news',
   component:News,
   //当你需要嵌套路由的时候你可以这么做
   //children子路由,接下来的json中的内容还是一样的,需要有最基本的path和component
   children:[
    {path:'/news/list',component:List}
   ]
  },
  {path:'*',redirect:'/home'} //404
  //当路径错误或没有这个路径的时候我们会给予一个默认路径
 ]
});

//最后挂在到vue实例上
new Vue({
 router,
 el: '#app',
 render: h => h(App)
})

html代码样式

<router-link to="/home">主页</router-link>
 <router-link to="/news">新闻</router-link>
 <router-link to="/news/list">列表</router-link>
 <router-view></router-view>

这样一个最基本的Vue前端路由就完成了!!!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
js编写简易的计算器
Jul 29 Javascript
JavaScript实现图片合成下载的示例
Nov 19 Javascript
Require.js的基本用法详解
Jul 03 #Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 #Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 #Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 #Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 #Javascript
微信小程序开发中的疑问解答汇总
Jul 03 #Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 #Javascript
You might like
php生成随机颜色的方法
2014/11/13 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
JavaScript 格式字符串的应用
2010/03/29 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
django从请求到响应的过程深入讲解
2018/08/01 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
提升python处理速度原理及方法实例
2019/12/25 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
材料加工硕士生求职信
2013/10/10 职场文书
党员组织关系介绍信
2014/02/13 职场文书
运动会报道稿300字
2014/10/02 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
CPU不支持Windows11系统怎么办
2021/11/21 数码科技