在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 相关文章推荐
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
jQuery实现html表格动态添加新行的方法
May 28 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 Javascript
js 数据类型判断的方法
Dec 03 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 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
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
wxPython使用系统剪切板的方法
2015/06/16 Python
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
strstr()的简单实现
2013/09/26 面试题
高级护理实习生自荐信
2013/09/28 职场文书
销售顾问岗位职责
2014/02/25 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
初二学生评语大全
2014/12/26 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
孟佩杰观后感
2015/06/17 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS