vue2 的router配置

我是通过脚手架创建vue项目

脚手架默认 default 没有配置 vue-router

如果选配 会有一个src/router.js文件 并会帮你在main.js中注册 

 

# 当我们没有勾选vue-router时

npm install vue-router@3 --save   下载vue-router@3

第一步:

在src下新建router文件夹

并且创建 index.js 和 routes.js

router/index.js 进行路由暴露和管理

router/routes.js 进行路由信息的储存

 

第二步:

在main.js中注册

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  render: (h) => h(App),
  //注册路由：底下的写法KV一致省略v【router小写的】
  //注册路由信息，当这里书写router的时候，组件身上都拥有$route,$router属性
  router,
}).$mount('#app');

 

第三步,创建页面,储存路由信息在routes.js文件中

主要:路由绑定路由页面 以及一些meta配置

src/pages/ 下新建Home.vue ,Login.vue.....

import Login from '@/pages/Login';

import Homefrom '@/pages/Home';

import Center from '@/pages/center'; //个人中心

import MyOrder from '@/pages/Center/myOrder'; //我的订单

import GroupOrder from '@/pages/Center/groupOrder'; //团购订单

export default [
  {　　
    name: 'Home',

      // 是当前路由的标识名称

    path: '/',
    component: () => import('@/pages/Home')
  },
  {
　　name: 'Login',
    path: '/login',
    component: Login,
    meta: {
      isShow: true
    },

  {
　　name: 'Center',
    path: '/center',
    component: Center,
    children: [
      {
        // path: '/center/myorder',
        path: 'myorder',
        component: MyOrder,
      },
      {
        path: 'grouporder',
        component: GroupOrder,
      },


      {
        path: '',
        redirect: 'myorder',//重定向 默认为个人中心的首页
      },
    ],
  },

]

src/router/index.js

//引入vue-router路由插件
import VueRouter from "vue-router";
//引入Vue
import Vue from "vue";
import routes from "./routes";

//对外暴露VueRouter类的实例
let router = new VueRouter({
  //配置路由
  routes,

 

});
export default router;