在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 相关文章推荐
XP折叠菜单&amp;仿QQ2006菜单
Dec 16 Javascript
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
JavaScript 学习笔记(七)字符串的连接
Dec 31 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
angularjs性能优化的方法
Sep 05 Javascript
JS回调函数深入理解
Oct 16 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中使用Oracle数据库(2)
2006/10/09 PHP
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
smarty的保留变量问题
2008/10/23 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
理解javascript中的闭包
2017/01/11 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
Python 用户登录验证的小例子
2013/03/06 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
python基础教程之五种数据类型详解
2017/01/12 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
Django 静态文件配置过程详解
2019/07/23 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
python取均匀不重复的随机数方式
2019/11/27 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
数控个人求职信范文
2014/02/03 职场文书
优秀护士获奖感言
2014/02/20 职场文书
个人廉洁自律总结
2015/03/06 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
python语言中pandas字符串分割str.split()函数
2022/08/05 Python