webpack中使用vue-router

起步

用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

详见 vue-router官方文档

导入模块

• 导入路由模块之前要保证 vue 模块的存在
  -import Vue from 'vue'
import VueRouter from 'vue-router'

• 手动安装 vue-router
  Vue.use(VueRouter)

• 然后把需要的组件导入进去 例如：
  //导入account，goodslist 组件
  import account from './min/Account.vue'
import goodslist from './min/GoodsList.vue'
  //导入account 的2个子组件
  import login from './subcom/login.vue'
import register from './subcom/register.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>
export default {
    
}
</script>

<style scoped lang='scss'>
/*普通的style 标签 只支持普通的样式，如果想要启用less，scss，要为元素设置lang属性*/
//只要咱们是在.vue 组件中定义 style，推荐都为style开启scopend属性
body{
    div{
        font-style: italic;
        background-color: pink;
    }
}
</style>

注意

• 普通的style 标签 只支持普通的样式，如果想要启用less，scss，要为元素设置lang属性
• 只要咱们是在.vue 组件中定义 style，推荐都为style开启scopend属性
  • 注意： App 这个组件，是通过 VM 实例的 render 函数，渲染出来的， render 函数如果要渲染 组件， 渲染出来的组件，只能放到 el: ‘#app’ 所指定的 元素中；
    Account 和 GoodsList 组件， 是通过 路由匹配监听到的，所以， 这两个组件，只能展示到 属于 路由的 中去；

创建路由对象

• 创建路由对象:

var router = new VueRouter({

  routes: [

    { path: '/', redirect: '/login' },

    { path: '/login', component: login },

    { path: '/register', component: register }

  ]

});

• 将路由对象，挂载到 Vue 实例上:

var vm = new Vue({

  el: '#app',

  // render: c => { return c(App) }

  render(c) {

    return c(App);

  },

  router // 将路由对象，挂载到 Vue 实例上

});

```js

- 改造App.vue组件，在 template 中，添加`router-link`和`router-view`：

```js

    <router-link to="/login">登录</router-link>

    <router-link to="/register">注册</router-link>



    <router-view></router-view>

抽离路由模块

• 注意在 router.js 我们要重新再导一遍router模块，因为 node是文件作用域，而且执行机制是不会存在重复导包，造成资源过载的问题，重复的包会存在于RAM中并不会重新加载，具体详见 node模块DOC

单独建一个router.js

不多说了-直接上代码

//路由文件
//1.导入vue-router 包
import VueRouter from 'vue-router'
//2手动安装 vue-router

//导入account，goodslist 组件
import account from './min/Account.vue'
import goodslist from './min/GoodsList.vue'
//导入account 的2个子组件
import login from './subcom/login.vue'
import register from './subcom/register.vue'

var routes = [
    { 
        path: '/account',
         component: account,
         children:[
             { path: 'login', component: login },
             { path: 'register', component: register }
         ]
    },
    { path: '/goodslist', component: goodslist }
]

//3.创建路由对象
const router = new VueRouter({
    routes
})

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

抽离后的入口模块代码

//vue 导包
import Vue from 'vue'
//1.导入vue-router 包
import VueRouter from 'vue-router'
//22手动安装 vue-router
Vue.use(VueRouter)

//导入app组件
import app from './App.vue'
//导入自定义路由模块
import router from './router.js'


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