结合webpack使用vue-router

1、cnpm i vue-router -S

2、在main.js中导入vue-router包，手动安装VueRouter

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

3、在main.js中导入各个Vue组件

4、创建路由对象

5、将路由对象挂载到vm上

注意：

1、render会把el指定的容器中的所有的内容都清空覆盖，所以不要把路由的router-view 和router-link直接写到el所控制的元素中；

2、App这个组件，是通过vm实例的render函数渲染出来的；render函数如果要渲染组件，渲染出来的组件，只能放到el: '#app'所指定的元素中；

3、Account和GoodsList组件，是通过路由匹配监听到的，所以，这两个组件，只能展示到属于路由的<router-view></router-view>中去；

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
</body>
</html>

main.js

// main.js 是项目的JS入口文件
import Vue from 'vue';
// 导入vue-router包
import VueRouter from 'vue-router';
// 手动安装VueRouter
Vue.use(VueRouter);

import app from './App.vue';
import account from './main/Account.vue';
import goodslist from './main/GoodsList.vue';

// 创建路由对象
var router = new VueRouter({
    routes: [
        { path: '/account', component: account },
        { path: '/goodslist', component: goodslist }
    ]
})

var vm = new Vue({
    el: '#app',
    data: {
        msg: '1234'
    },
    render: c => c(app),
    // 将路由对象挂载到vm上
    router 
})

App.vue

<template>
    <div>
        <h1>App组件</h1>
        <router-link to="/account">Account</router-link>
        <router-link to="/goodslist">GoodsList</router-link>

        <router-view></router-view>
    </div>
</template>

<script>
export default {
    
}
</script>

<style>

</style>

结合webpack实现children子路由

main.js

// main.js 是项目的JS入口文件
import Vue from 'vue';
// 导入vue-router包
import VueRouter from 'vue-router';
// 手动安装VueRouter
Vue.use(VueRouter);

import app from './App.vue';
import account from './main/Account.vue';
import goodslist from './main/GoodsList.vue';
// 导入account的子路由组件
import login from './subcom/login.vue';
import register from './subcom/register.vue';
// 创建路由对象
var router = new VueRouter({
    routes: [
        {
            path: '/account',
            component: account,
            children: [
                { path: 'login', component: login },
                { path: 'register', component: register }
            ]
        },
        { path: '/goodslist', component: goodslist }
    ]
})

var vm = new Vue({
    el: '#app',
    data: {
        msg: '1234'
    },
    render: c => c(app),
    // 将路由对象挂载到vm上
    router 
})

Account.vue

<template>
    <div>
        <h1>Account组件</h1>
        <router-link to="/account/login">登陆</router-link>
        <router-link to="/account/register">注册</router-link>

        <router-view></router-view>
    </div>
</template>

<script>
export default {
    
}
</script>

<style>

</style>

抽离路由模块

在src文件夹下，建一个router.js文件，路由相关的都放在这个文件里面

main.js

// main.js 是项目的JS入口文件
import Vue from 'vue';
// 导入vue-router包
import VueRouter from 'vue-router';
// 手动安装VueRouter
Vue.use(VueRouter);
// 导入app组件
import app from './App.vue';
// 导入自定义的路由模块
import router from './router.js';
var vm = new Vue({
    el: '#app',
    data: {
        msg: '1234'
    },
    render: c => c(app),
    // 将路由对象挂载到vm上
    router 
})

router.js

import Vue from 'vue';
// 导入vue-router包
import VueRouter from 'vue-router';
// 手动安装VueRouter
Vue.use(VueRouter);

import account from './main/Account.vue';
import goodslist from './main/GoodsList.vue';
// 导入account的子路由组件
import login from './subcom/login.vue';
import register from './subcom/register.vue';
// 创建路由对象
var router = new VueRouter({
    routes: [
        {
            path: '/account',
            component: account,
            children: [
                { path: 'login', component: login },
                { path: 'register', component: register }
            ]
        },
        { path: '/goodslist', component: goodslist }
    ]
})

// 把路由对象暴露出去
export default router

结合webpack使用vue-router

结合webpack使用vue-router

结合webpack实现children子路由

抽离路由模块

猜你喜欢