在vue-cli脚手架中配置一个vue-router前端路由
更新时间：2017年07月03日 12:02:51 作者：righten_Sun
这篇文章主要给大家介绍了在vue-cli脚手架中配置一个vue-router前端路由的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
前言
这篇文章给大家讲解的是在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前端路由就完成了!!!
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
这篇文章主要介绍了vue中button标签样式和功能禁用的写法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了关于vue中如何监听数组变化，对vue感兴趣的同学，必须得参考下2021-04-04
这篇文章主要为大家详细介绍了vue实现打卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
原始值指的是 Boolean、Number、BigInt、String、Symbol、undefined、null 等类型的值，在 JavaScript 中，原始值是按值传递的，引用类型是按引用传递的，这意味着，如果一个函数接收了一个原始值作为参数，那么形参和实参之间是没有引用关系的，它们是完全独立的两个值2023-01-01
这篇文章主要介绍了vue如何向后台传递日期，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了使用vue引入maptalks地图及聚合效果的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
为了实现全屏滚动效果,我们首先需要使用Vue.js框架搭建项目,这篇文章主要给大家介绍了关于VUE屏幕整体滚动(滑动或滚轮)原生方法的相关资料,需要的朋友可以参考下2024-01-01
vue element-ui里的table中表头与表格出现错位的解决
这篇文章主要介绍了vue element-ui里的table中表头与表格出现错位的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
本文为大家介绍Vue中路由的使用方法,包括安装路由创建路由并导出以及在应用实例中使用vue-router的相关知识,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-02-02
vue的过渡动画，主要是transition标签的使用，配合css动画实现的。接下来通过本文给大家分享Vue运用transition实现过渡动画效果，感兴趣的朋友一起看看吧2019-05-05
最新评论