012 webpack the router

A: Preparations

1.App.vue

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

<script>
</script>


<style>

</style>

　　

2.main.js

// js main entrance 
the console.log ( "OK") 

Import from Vue 'VUE' 

Import from App './App.vue' 

var Vue new new VM = ({ 
    EL: '# App', 
    the render: C => C (App) 
})

　　

3. Effect

　　Components will replace the div container on display

　　

 

 

II: Routing

1. Install

　　

 

2. Create two components vue

　　

　　one of them:

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


<script>
</script>

<style>

</style>

　　

3. Create a guide packet routing and the object

　　note/

// js main entrance 
the console.log ( "OK") 

Import from Vue 'vue' 

// reference vue-router, and then the relationships generated vue 
Import from VueRouter 'vue-Router' 
Vue.use (VueRouter) 

Import from Account ' ./main/Account.vue ' 
Import from goodlist' ./main/Goodslist.vue ' 

// Create routing object 
var = new new Router VueRouter ({ 
    routes: [ 
        {path:' / Account ', Component: Account}, 
        {path : '/ goodlist', Component: goodlist} 
    ] 
}) 

Import from App './App.vue' 
var Vue new new VM = ({ 
    EL: '# App', 
    the render: C => C (App), 
    Router 
})

　　

4. In the app.vue

<template>
  <div>
    <h1>这是 App 组件</h1>
    <router-link to="/account">Account list</router-link>
    <router-link to="/goodlist">Goodslist list</router-link>

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

<script>
</script>


<style>

</style>

　　effect:

　　

 

 

Three: routing subassembly

　　Account of the assembly to continue Nested

1. Create a new sub-assembly

　　

 

 

2. Routing Problem

　　First reference, and then handles the routing

// js main entrance 
the console.log ( "OK") 

Import from Vue 'vue' 

// reference vue-router, and then the relationships generated vue 
Import from VueRouter 'vue-Router' 
Vue.use (VueRouter) 

Import from Account ' ./main/Account.vue ' 
Import goodlist from' ./main/Goodslist.vue ' 
Import from the Login' ./subcom/login.vue ' 
Import from the Register' ./subcom/register.vue ' 

// create a route object 
var Router = new new VueRouter ({ 
    routes: [ 
        {path: '/ Account', 
        Component: Account, 
        Children: [ 
            {path: 'Login', Component: Login}, 
            {path: 'Register', Component: Register} 
          ] 
        },
        {path:'/goodlist',component:goodlist}
    ]
})

import app from './App.vue'
var vm = new Vue({
    el:'#app',
    render:c=>c(app),
    router
})

　　

3. Modify 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>
</script>

<style>

</style>

　　

4. Effects

　　

 

 

5. Note point: scoped

　　We need to add a scoped in login.vue, the above can generate red. If not, the parent div will turn red.

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

<Script> 
</ Script> 


<style scoped> 
div { 
  Color: Red; 
} 
</ style>

　　

6. Notes

　　Here is a modified form within the scope of Account.vue

<Template> 
  <div> 
    <h1 of> What is Account component </ h1 of> 
    <Router-Link to = "/ Account / Login"> log </ Router-Link> 
    <Router-Link to = "/ Account / Register"> Register </ Router-Link> 

    <Router-View> </ Router-View> 
  </ div> 
</ Template> 


<Script> 
</ Script> 

<style lang = "SCSS" scoped> 
/ * ordinary style tags only support ordinary style, if you want to enable scss or less, the need for the style element, set the lang attribute * / 
// as long as our style tags are defined in .vue components, then, are recommended open style attribute scoped 
body { 
  {div 
    font-style: Italic; 
  } 
} 
</ style>

　　effect:

　　

 

 

Four: abstract

1.main.js

　　He cited the new router. js

// js main entrance 
the console.log ( "OK") 

Import from Vue 'vue' 

// reference vue-router, and then the relationships generated vue 
Import from VueRouter 'vue-Router' 
Vue.use (VueRouter) 

Import from Router ' ./router.js' 

Import from App './App.vue' 
var Vue new new VM = ({ 
    EL: '# App', 
    the render: C => C (App), 
    Router 
})

　　

2. Create router.js

　　Note exposure

import VueRouter from 'vue-router'

import account from './main/Account.vue'
import goodlist from './main/Goodslist.vue'
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:'/goodlist',component:goodlist}
    ]
})

export default router;