在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 相关文章推荐
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
angular2使用简单介绍
Mar 01 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 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设置编码格式的方法
2013/03/05 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
ionic3双击返回退出应用的方法
2019/09/17 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
Python 第一步 hello world
2009/09/25 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
python元组的概念知识点
2019/11/19 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
python 实现aes256加密
2020/11/27 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
安全承诺书格式
2014/05/21 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
施工员岗位职责
2015/02/10 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
2016年学校招生广告语
2016/01/28 职场文书
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏