webpack和Vue-router的使用
2018-10-30 本文已影响14人
追逐_chase
webPack.jpg
准备工作
- 安装
webpack - 安装
webpack-dev-server - 配置
webpack.config.js - 配置
package.json - 安装
loader
可以看wenpack基础
路由的书名介绍
- 我们在
webpack中使用时基于模块 - 安装
npm install vue-router
1.引入Vue
import Vue from 'vue'
2.引入vue-router
import VueRouter from 'vue-router'
3.挂载路由
Vue.use(VueRouter)
- 使用步骤
1.创建路由对象
2.创建.vue文件并并导入，入口文件main.js
3.创建Vue实例对象,用属性touter关联路由对象
- html 文件
<body>
<div id="app">
</div>
</body>
</html>
- main.js文件
console.log("看看引入没有");
//文件入口
import Vue from "vue"
//1.引包
import VueRouter from "vue-router"
import app from "./App.vue"
import account from "./Account.vue"
import goodlist from "./GoodsList.vue"
//嵌套
import login from "./childen/login.vue"
import register from "./childen/register.vue"
//2手动 让router 挂在到Vue上
Vue.use(VueRouter)
//3创建路由对象
var routerObj = new VueRouter({
routes: [
// 嵌套路由 对象规则
{
path:"/account",
component:account,
children:[
{path:"login",component:login},
{path:"register",component:register}
]
},
{path:"/goodlist",component:goodlist}
]
})
var vm = new Vue({
el:"#app",
// data:{
// msg:"这是什么"
// }
render:function(createElements){
return createElements(app);
},
router:routerObj
})
//注意：App这个组件，是通过VM实例的 render函数，渲染出来的，render函数如果压迫渲染组件，渲染出来的组件，只能放到el:"#app" 所指定的元素中
//Account和Goodslist组件，是通过路由匹配监听到的，所以，这2个组件，只能展示属性路由的 <router-view></router-view>中去
- app.vue文件
//html代码
<template>
<div>
<h1>这是App组件</h1>
<router-link to="/account">这是account组件</router-link>
<router-link to="/goodlist">这是goodlist组件</router-link>
<router-view></router-view>
</div>
</template>
//逻辑处理
<script>
</script>
//样式
<style>
</style>
- GoodsList.vue文件
<template>
<div>
<h1>这是GoodsList组件</h1>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
- Account.vue文件 (和 GoodsList.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>
</style>
- login.vue组件
<template>
<div>
<h1>登录组件</h1>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
- register.vue组件
<template>
<div>
<h1>这是注册组件</h1>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
vue结构图
image.png
效果
效果.gif
喜欢文章的👍一下，谢谢，有想学习[web]可以私聊我。
image.png
