在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的21条基本知识点
Mar 04 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
JS实现网页端猜数字小游戏
Mar 06 Javascript
vue全屏事件开发详解
Jun 17 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跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
JavaScript原型链示例分享
2014/01/26 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
Python中使用动态变量名的方法
2014/05/06 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
Django开发中的日志输出的方法
2018/07/02 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
Python实现仿射密码的思路详解
2020/04/23 Python
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
C语言笔试题回忆
2015/04/02 面试题
团员个人的自我评价
2013/12/02 职场文书
鲜果饮品店创业计划书
2014/01/21 职场文书
挂靠协议书范本
2014/04/22 职场文书
党员示范岗材料
2014/12/19 职场文书
幼儿园个人总结
2015/02/28 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
护士医德医风心得体会
2016/01/25 职场文书