在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+导航锚点联动-滚动监听和点击平滑滚动跳转实例

    vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例

    今天小编就为大家分享一篇vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 详解Vue基于 Nuxt.js 实现服务端渲染(SSR)

    详解Vue基于 Nuxt.js 实现服务端渲染(SSR)

    直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染,本篇文章主要介绍了详解Vue基于 Nuxt.js 实现服务端渲染(SSR),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-04-04
  • 基于Vue2的移动端开发环境搭建详解

    基于Vue2的移动端开发环境搭建详解

    这篇文章主要给大家介绍的是基于Vue2的移动端环境搭建,移动端大家更多想到的是响应布局,我们根据不同大小的屏幕进行适配,当然少不了我们的重头戏rem,移动端相比pc端就没什么特别的了。我会一步一步带领大家进入Vue2的世界,感兴趣的朋友下面来一起学习学习吧。
    2016-11-11
  • vue实现简单全选和反选功能

    vue实现简单全选和反选功能

    这篇文章主要为大家详细介绍了vue实现简单全选和反选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • vue项目中的webpack-dev-sever配置方法

    vue项目中的webpack-dev-sever配置方法

    下面小编就为大家分享一篇vue项目中的webpack-dev-sever配置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • vue路由跳转传参数的方法

    vue路由跳转传参数的方法

    这篇文章主要介绍了vue路由跳转传参数的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue2.0 解决抽取公用js的问题

    vue2.0 解决抽取公用js的问题

    这篇文章主要介绍了vue2.0 解决抽取公用js的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 用vue2.0实现点击选中active其他选项互斥的效果

    用vue2.0实现点击选中active其他选项互斥的效果

    这篇文章主要介绍了用vue2.0实现点击选中active其他选项互斥的效果,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Vue 中mixin 的用法详解

    Vue 中mixin 的用法详解

    e中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用。这篇文章主要介绍了Vue mixin 的用法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)

    vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)

    我发现好多倒计时的插件,刷新都会变成从头再来,于是自己用vue2.0写了一个,感觉还不错,特此分享到脚本之家平台供大家参考下
    2017-03-03

最新评论