Combined webpack use vue-router (seven)

Use in conjunction webpack vue-router:

Install routing packet vue-router: cnpm install vue-router
After using a modular tool to import vue-router, you must manually call Vue.use () explicit routing installation:
Import vue package: import Vue from 'vue';
Introducing vue-router package: import VueRouter from 'vue-router';
Manual installation Vue-router: Vue.use (VueRouter);
Import Account Components
Import GoodsList components
Create routing object: var router = new VueRouter ({routes: [accout, goodslist]});

Entry function main.js:

@ `1: Import vue packet 
Import Vue from 'vue' ;
 // 2: Import vue-router packet 
Import   VueRouter from 'vue-router' ;
 // . 3: manual installation VueRouter 
Vue.use (VueRouter);
 // . 4 : Account component introduced 
import Account from './main/Account.vue' ;
 // . 5: introducing GoodsList assembly 
import goodsList from './main/GoodsList.vue' ; 

import App from './App.vue' ; 

// 6: creating VueRouter routing object 
var = Router new new VueRouter ({
     // the Account GoodsList 
    routes: [ 
        {path:'/ Account' , Component: Account}, 
        {path: '/ goodsList' , Component: goodsList}, 
    ] 
}); 

var VM = new new Vue ({ 
    EL: "#app" , 
    the render: C => C (App) , // the render el will specify all of the contents of the container are emptied cover, so do the route and router-view router-link element el are written directly controlled; 
    Router // . 7: the route object mount to vm 
}); 

// the App this component is rendered by the render function vm instance, if the function to render render component, only a component rendered into el: '# app' all the specified elements;
 / / the Account and GoodsList matching components are monitored through the route, so that the two components only appear to belong to route <router-view> </ router -view> go;

Creating a component Account.vue:

<template>
    <div>
        <h1>
            这是 Account 组件
        </h1>
    </div>
</template>

<script>
    export default {
        name: "account"
    }
</script>

<style scoped>

</style>

Creating GoodsList.vue components:

<template>
    <div>
        <h1>
            这是 GoodsList 组件
        </h1>
    </div>
</template>

<script>
    export default {
        name: "GoodsList"
    }
</script>

<style scoped>

</style>

Creating App.vue components:

<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>

</script>

<style>

</style>

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--这时容器-->
    <div id="app">

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

Display of results:

Creating sub-assemblies:

　　1: Create a sub-assembly register.vue:

<template>
    <div>
        <h3>这是 Account 的注册子组件</h3>
    </div>
</template>

<script>
    export default {
        name: "register"
    }
</script>

<style scoped>

</style>

View Code

　　2: Creating a sub-assembly login.vue:

<Template> 
    <div> 
        <H3> This is Account login subassembly </ H3> 
    </ div> 
</ Template> 

<Script> 
    Export default { 
        name: "Login" 
    }
 </ Script> 

<style scoped> 

</ style>

View Code

　　3: Adding a link sub-assembly and assembly account.vue the display area:

<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 {
        name: "account"
    }
</script>

<style scoped>

</style>

View Code

　　4: entry file main.js amended as follows:

@ `1: Import vue packet 
Import Vue from 'vue' ;
 // 2: Import vue-router packet 
Import   VueRouter from 'vue-router' ;
 // . 3: manual installation VueRouter 
Vue.use (VueRouter);
 // . 4 : Account component introduced 
import Account from './main/Account.vue' ;
 // . 5: introducing goodsList assembly 
import goodsList from './main/GoodsList.vue' ; 

import App from './App.vue' ; 

// 9: introducing the two subassemblies account 
import Login from './subcom/login.vue' ;
 import Register from './subcom/register.vue' //

6: Creating objects VueRouter 
var = Router new new VueRouter ({
     // the Account GoodsList 
    routes: [ 
        { 
            path: '/ account' , 
            Component: account, 
            Children: [ // . 8: Create two subassemblies account of 
                {path: 'login' , Component: Login}, 
                {path: 'Register' , Component: Register} 
            ] 
        }, 
        {path: '/ goodsList' , Component: goodsList}, 
    ] 
}); 

var VM = new new Vue ({ 
    EL: "#app", 
    The render: C => C (App), // the render el will specify all of the contents of the container are emptied cover, so do the route and router-view router-link element el are written directly controlled; 
    Router // . 7: the routing object to mount vm 
}); 

// the App this component is rendered by the render function vm instance, if the function to render render component, only a component rendered into el: ' #app 'all the specified elements;
 // the Account and GoodsList matching components are monitored through the route, so that the two components only appear to belong to route <router-view> </ router -view> go;

View Code

　　Add the code:

Add the display sub-assembly:

Combined webpack use vue-router (seven)

Use in conjunction webpack vue-router:

Creating sub-assemblies:

Guess you like