vue配置vue-router

2018/04/28 16:39
阅读数 473

首先理清一下几个路由的基础概念:

1)route是一条路由,也就是映射,即A按钮→A内容,以数组形式存储

2)toutes:[]是一组路由,里面包含了若干条route,即route[{A按钮→A内容},{B按钮→B内容}]

3)router是管理机制,负责处理和查找路由请求

const router = new VueRouter({

routes

})

 

配置路由的步骤如下:

1.安装vue-router,在npm中输入 npm install vue-router,安装成功后在main.js同级目录下会出现router文件夹

2.在router文件夹下的index.js里面配置路由的相关信息:

  import Vue from 'vue' import VueRouter from 'vue-router'

  import xx from 'xxx'

  Vue.use(Router)

  export default new Router({

  routes:[

  {

  path:'/',  //必填,表示跳转的一条route路径,/表示首页的路径。

  name:'index',   //选填,为组件的名称,为了便于区分建议填写

  component:HellloFromVux  //必填,指定了需要跳转的组件

  },{

    …

  }

  ]

})

 

3.在组件内给vue-router配置一个渲染路由的出口,

<router-link to='目标组件所在路径(不用加文件名)'>

<div></div>//此处写组件在本页的显示样式,相当于a标签样式

</router-link>

<router-view></router>//给路由一个渲染的出口

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部