在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 相关文章推荐
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
js数组的操作指南
Dec 28 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 Javascript
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
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 echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
html数组字符串拼接的最快方法
2009/09/16 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
Django csrf 验证问题的实现
2018/10/09 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
关于Java String的一道面试题
2013/09/29 面试题
财务工作个人求职的自我评价
2013/12/19 职场文书
优秀党支部事迹材料
2014/01/14 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
中小学生学籍证明
2014/10/25 职场文书
班主任经验交流材料
2014/12/16 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
2015年电工工作总结
2015/04/10 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python