012 webpack中的router

一：準備工做

1.App.vue

<template>
  <div>
    <h1>這是 App 組件</h1>
  </div>
</template>

<script>
</script>


<style>

</style>

　　

2.main.js

// js的主要入口
console.log("ok")

import Vue from 'vue'

import app from './App.vue'

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

　　

3.效果

　　組件會替代div容器進行展現

　　

 

 

二：路由

1.安裝

　　

 

2.新建兩個vue組件

　　

　　其中的一個：

<template>
  <div>
    <h1>這是 Account 組件</h1>
  </div>
</template>


<script>
</script>

<style>

</style>

　　

3.導包與建立路由對象

　　注意/

// js的主要入口
console.log("ok")

import Vue from 'vue'

//引用vue-router，而後和vue產生關係
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import account from './main/Account.vue'
import goodlist from './main/Goodslist.vue'

// 建立路由對象
var router =new VueRouter({
    routes: [
        {path:'/account',component:account},
        {path:'/goodlist',component:goodlist}
    ]
})

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

　　

4.在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>

　　效果：

　　

 

 

三：子組件的路由

　　在Account的組件中再繼續嵌套

1.新建子組件

　　

 

 

2.處理路由的問題

　　先引用，而後處理路由

// js的主要入口
console.log("ok")

import Vue from 'vue'

//引用vue-router，而後和vue產生關係
import VueRouter from 'vue-router'
Vue.use(VueRouter)

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}
    ]
})

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

　　

3.修改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.效果

　　

 

 

5.注意點：scoped

　　在login.vue中須要加一個scoped，才能夠產生上面的紅色。若是不加，其父的div也會變紅。

<template>
  <div>
    <h3>這是Account的登陸子組件</h3>
  </div>
</template>

<script>
</script>


<style scoped>
div {
  color: red;
}
</style>

　　

6.注意點

　　這裏是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 lang="scss" scoped>
/* 普通的 style 標籤只支持 普通的 樣式，若是想要啓用 scss 或 less ，須要爲 style 元素，設置 lang 屬性 */
// 只要 我們的 style 標籤， 是在 .vue 組件中定義的，那麼，推薦都爲 style 開啓 scoped 屬性
body {
  div {
    font-style: italic;
  }
}
</style>

　　效果：

　　

 

 

四：抽象

1.main.js

　　引用新建的router。js

// js的主要入口
console.log("ok")

import Vue from 'vue'

//引用vue-router，而後和vue產生關係
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import router from './router.js'

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

　　

2.新建router.js

　　注意暴露

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;