webpack中使用vue实战-4(使用Vue-Router)

目录

一.安装Vue-Router

二.创建路由模块 

三.使用路由模块 

四.测试路由模块

一.安装Vue-Router

npm install -S vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能:

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

Vue.use(VueRouter)

二.创建路由模块 

新建一个router.js文件作为项目路由入口

这里以用户登录和注册为例来简单的实现一个路由,其中组件假设已经创建好了

src/router.js

//项目路由模块入口文件

import VueRouter from "vue-router";

import user from "./user/User.vue";
import login from "./user/sub/Login.vue";
import register from "./user/sub/Register.vue";

var router = new VueRouter({
    routes: [{
        path: "/user",
        component: user,
        children: [{
                path: "login",
                component: login
            },
            {
                path: "register",
                component: register
            },
        ]
    }, ]
})

export default router;

项目结构如下

D:\VSCODE\WEBPACK-VUE
|─node_modules
│  .babelrc
│  package-lock.json
│  package.json
│  webpack.config.js
│
└─src
    │  App.vue
    │  index.html
    │  main.js
    │  router.js
    │
    └─user
        │  User.vue
        │
        └─sub
                Login.vue
                Register.vue

src/App.vue

<template>
  <div>
    <h1>这是一个app组件</h1>
    <router-link to="/user">前往用户模块</router-link>
    <router-view></router-view>
  </div>
</template>

src/user/User.vue

<template>
  <div>
    <h1>这是用户模块</h1>
    <router-link to="/user/login">登录</router-link>
    <router-link to="/user/register">注册</router-link>
    <router-view></router-view>
  </div>
</template>

src/user/sub/Login.vue

<template>
    <div>
        <h4>这是登录子组件</h4>
    </div>
</template>

src/user/sub/Register.vue

<template>
    <div>
        <h4>这是注册子组件</h4>
    </div>
</template>

三.使用路由模块 

项目入口文件中引入路由模块并使用

src/main.js

//项目js入口文件
import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

import app from "./App.vue";
import router from "./router";

var vm = new Vue({
    el: '#app',
    render: c => c(app),
    router
})

四.测试路由模块

命令行执行 npm start,如果没有问题会看到如下页面