Vue 手动配置路由

不用一键创建项目的方式

手动引用

1.安装路由组件(vue2)

npm i vue-router@3

2.创建路由映射js

创建 src/router/index.js

// 引用 Vue  和路由组件
import Vue from 'vue';
import VueRouter from 'vue-router'

// 使用路由组件
Vue.use(VueRouter)


// 引入路由页面
import Home from '@/pages/Home'
import Login from '@/pages/Login'

// 设置路由映射
export default new VueRouter({
        routes:[
            {
                path:"/",
                component:Home
            },
            {
                path:"/login",
                component:Login
            }
        ]
})

3.主入口main.js

引入路由

// 引入路由
import router from '@/router'

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