Vue路由配置

Vue路由使根组件可以自由的挂载需要的子组件。

路由配置：

一、安装

npm install vue-router  --save 或 cnpm install vue-router  --save

二、在main.js中依次写入如下代码（1~5），进行配置

1、引入并使用Vue路由

import VueRouter from 'vue-router';

Vue.use(VueRouter);  //注意Vue.use中Vue首字母大写

2、创建组件后引入组件

import apphead from './components/apphead.vue';/*引入组件*/

import appmain from './components/appmain.vue';

3、配置路由

const routes=[

{path:'/apphead',component:apphead},

{path:'/appmain',component:appmain},

{path:'*',component:apphead}//默认跳转路由

]

4、实例化VueRouter

const router=new VueRouter({

routes//(缩写) 相当于routes:routes

      //这里的routes与配置路由中的routes对应

})

5、挂载路由

new Vue({ router })

6、在根组件中动态加载路由与路由跳转

<router-link to="/apphead">组件一</router-link>

<router-link to="/appmain">组件二</router-link>    //组件跳转

<router-view></router-view>  //动态加载路由