韦德国际bv1946_www.bv1946com_韦德国际1946手机版
做最好的网站

是一组路由

日期:2019-05-18编辑作者:韦德国际bv1946计算机

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

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>//给路由一个渲染的出口

本文由韦德国际bv1946手机版发布于韦德国际bv1946计算机,转载请注明出处:是一组路由

关键词: