Vue2路由创建使用方法

一：vue-router安装和配置步骤

npm i vue-router

二：创建router文件夹和文件

index.js:

//router/index

import Vue from 'vue';
import VueRouter from 'vue-router';

// 引入routes文件
import routes from "./routes"

Vue.use(VueRouter);
export default router

router.js:

//router.js 也可以是其他名字

import Login from '@/views/Login/index.vue'

export default [
    {
        // 重定向,在项目跑起来的时候就出现的路由
        path: '*',
        redirect: '/home'
    },
    {
        path: '/shopcart',
        name: 'shopcart',
        // 路由懒加载
        component: () => import("@/views/ShopCart"),
        meta: {
            show: true
        }
    },
    {
        path: '/addcartsuccess',
        name: 'addcartsuccess',
        // 路由懒加载
        component: () => import("@/views/AddCartSuccess"),
        meta: {
            show: true
        }
    },
    {
        path: '/detail/:skuid',
        component: () => import("@/views/Detail"),
        meta: {
            show: true
        }
    },
    {
        // 主页
        name: 'home',
        path: '/home',
        component: () => import("@/pages/Home/Home.vue"),
        meta: {
            // 判断是否显示Footer组件
            show: true
        }
    },
    {
        // 登录
        name: 'login',
        path: '/login',
        component: Login,
        meta: {
            show: false
        }
    }
]

三：使用方法

路由组件显示

<template>
  <div id="app">
    <!-- 点击跳转到路由组件 -->
    <router-link to="/home">主页</router-link>

    <!-- 显示路由组件 -->
    <router-view></router-view>
  </div>
</template>