将router路由的文件从main.js中独立

需求：
之前放在main.js中的内容过多，现在需要独立的文件夹放置路由配置文件：

步骤① 新建独立文件和文件夹

在src目录下新建了router目录，这里专门放配置文件。index.js就是配置文件

步骤② 填写内容

import Vue from 'vue'

//1. 安装   引入路由
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//2. 定义路由组件
import Home from "../views/Home.vue"
import news from "../views/news.vue"

//3.定义路由- 配置路由走向
const routes = [
    {
    
    
        path: "/", //页面的路径
        component: Home  //去哪个页面
    },
    {
    
    
        path: "/news", //页面的路径
        component: news  //去哪个页面
    }
]

//4. 创建router实例，然后传“routes”配置
const router = new VueRouter({
    
    
    //routes : routes
    routes
})

//5.导出router
export default router

步骤③ 在main.js中引入

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
Vue.config.productionTip = false


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