Separate the router routing files from main.js

Requirements:
There was too much content placed in main.js before, and now a separate folder is needed to place the routing configuration file:

Step ① Create new independent files and folders

A new router directory is created under the src directory, where configuration files are specifically placed. index.js is the configuration file

Step ② Fill in the content

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

Step ③ Introduce in 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')