vue-router如何配置

今天我们来讲一下如何去配置vue-router，vue路由是vue全家桶中至关重要的，他来控制路由分发和跳转。

1、引入vue-router

首先我们需要通过 npm i vue-router 来安装我们所需要的依赖，我们在main.js中引入vue-router，并且在new Vue中触发一个属性router，原来应该 router:router 写，es6中我们就可以简写为 router 。

// 引入Vue
import Vue from 'vue'
// 引入App组件
import App from './App.vue'
// 引入路由
import VueRouter from 'vue-router'
import router from './router'
// 关闭vue生产提示
Vue.config.productionTip = false
Vue.use(VueRouter)

new Vue({
    render: r => r(App),
    router
}).$mount('#app')

2、创建router文件夹，并在里面创建index.js文件

这样命名规范是由于在mian.js中引入路由文件是，会默认去找index.js。配置index文件，首先这里也需要引入vue-router 然后我们创建一个VueRouter实例对象，并使用export default默认暴露的方法暴露出去。

import VueRouter from "vue-router";
export default new VueRouter({

})

3、配置路由

我们需要先引入需要配置路由的组件，然后通过路由分发这些组件，这里我们就随便写几个组件。三个组件，Home和News属于同级组件，Message属于News下的子组件，也就是嵌套路由。我们访问Home可以在url中输入 'localhost:8080/home'，即可访问，这里8080是脚手架跑项目的默认端口。创建VueRouter里面有一个对象，对象里面有一个键名为routes，键值为数组形式的键值对，就是在这里配置路由信息的。数组中是对象，对象中有两个必须的path和component两个属性，没有的话，则配置无效。嵌套路由是如何访问？url 'localhost:8080/news/message' 即可访问，children是儿童的意思，在这里是News下的子路由即下一级路由，通过同样的方法配置即可。

import VueRouter from "vue-router";
import Home from '../pages/Home';
import News from '../pages/News';
import Message from '../pages/Message';

export default new VueRouter({
     routes: [
        {
            path: '/home',
            component: Home
        },
        {
            path: '/news',
            component: News,
            children:[
                {
                    path: 'message',
                    component: Message
                }
            ]
        },
})

配置路由就将这些，如有误，请斧正！！！