Vue 手动配置路由

不用一键创建项目的方式

 

手动引用

 

1.安装路由组件(vue2)

npm i vue-router@3

 

2.创建路由映射js

创建 src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
//导入界面组件
import home from "../components/HelloWorld.vue";
import test from "../components/tes.vue"
Vue.use(VueRouter)



const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes: [
        {
            path: '/',
            name: 'home',
            component: home,
            meta: {
                name: '首页'
            }
        },
        {
            path: '/test',
            name: 'test',
            component: test,
            meta: {
                name: '测试'
            }
        }
    ]
})


router.beforeEach((to, from, next) => {
    // 动态标题
    if (to.meta && to.meta.name) {
        document.title = to.meta.name;
    } else {
        document.title = "Hello";
    }
    next();
});

export default router;

 

 

3.主入口main.js

引入路由

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

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