webpack+vue路由

只寫路由部分的相關內容

需引入路由包

import Vue from 'vue'
// 1. 導入 vue-router 包
import VueRouter from 'vue-router'
// 2. 手動安裝 VueRouter 
Vue.use(VueRouter)

// 導入 app 組件
import app from './App.vue'
// 導入 Account 組件
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'

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

var vm = new Vue({
  el: '#app',
  render: c => c(app), // render 會把 el 指定的容器中，全部的內容都清空覆蓋，因此 不要 把 路由的 router-view 和 router-link 直接寫到 el 所控制的元素中
  router // 4. 將路由對象掛載到 vm 上
})

// 注意： App 這個組件，是經過 VM 實例的 render 函數，渲染出來的， render 函數若是要渲染 組件， 渲染出來的組件，只能放到 el: '#app' 所指定的 元素中；
// Account 和 GoodsList 組件， 是經過 路由匹配監聽到的，因此， 這兩個組件，只能展現到 屬於 路由的 <router-view></router-view> 中去；

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


<style>

</style>

如下兩個在一個main文件夾裏
1.veu

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


<script>
</script>

<style>

</style>

2.vue

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


<script>
</script>

<style>

</style>

路由嵌套

加了個children而已
對路由進行分離
main.js

import Vue from 'vue'
// 1. 導入 vue-router 包
import VueRouter from 'vue-router'
// 2. 手動安裝 VueRouter 
Vue.use(VueRouter)

// 導入 app 組件
import app from './App.vue'

// 導入 自定義路由模塊
import router from './router.js'

var vm = new Vue({
  el: '#app',
  render: c => c(app), // render 會把 el 指定的容器中，全部的內容都清空覆蓋，因此 不要 把 路由的 router-view 和 router-link 直接寫到 el 所控制的元素中
  router // 4. 將路由對象掛載到 vm 上
})

// 注意： App 這個組件，是經過 VM 實例的 render 函數，渲染出來的， render 函數若是要渲染 組件， 渲染出來的組件，只能放到 el: '#app' 所指定的 元素中；
// Account 和 GoodsList 組件， 是經過 路由匹配監聽到的，因此， 這兩個組件，只能展現到 屬於 路由的 <router-view></router-view> 中去；

router.js

import VueRouter from 'vue-router'

// 導入 Account 組件
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'

// 3. 建立路由對象
var router = new VueRouter({
  routes: [
    // account  goodslist
    {
      path: '/account',
      component: account,
      children: [
        { path: 'login', component: login },
        { path: 'register', component: register }
      ]
    },
    { path: '/goodslist', component: goodslist }
  ]
})

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