在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代码
Aug 13 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 Javascript
夯基础之手撕javascript继承详解
Nov 09 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
我的论坛源代码(四)
2006/10/09 PHP
PHP 一个随机字符串生成代码
2010/05/26 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
PHP培训要多少钱
2017/06/06 PHP
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
python使用post提交数据到远程url的方法
2015/04/29 Python
Python下线程之间的共享和释放示例
2015/05/04 Python
Python运算符重载用法实例分析
2015/06/01 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
python实现图片插入文字
2019/11/26 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
品管员岗位职责
2013/11/10 职场文书
电子商务应届生求职信
2013/11/16 职场文书
高校教师自荐信范文
2014/03/13 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
修辞手法有哪些?
2019/08/29 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers