vue配置vue-router

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

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