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

巴特西

webpack+vue路由

只写路由部分的相关内容

路由嵌套

最新文章

热门文章