结合 webpack 使用 vue-router（七）
结合 webpack 使用 vue-router：
- 首先安装路由包vue-router： cnpm install vue-router
- 使用模块化工具导入 vue-router 后，必须手动调用 Vue.use() 明确的安装路由：
- 导入 vue 包：import Vue from 'vue'；
- 导入 vue-router 包：import VueRouter from 'vue-router'；
- 手动安装 Vue-router ：Vue.use(VueRouter)；
- 导入 Account 组件
- 导入 GoodsList 组件
- 创建路由对象：var router = new VueRouter({ routes:[ accout, goodslist ] });
入口函数 main.js:
//`1：导入 vue 包
import Vue from 'vue';
//2：导入 vue-router 包
import VueRouter from 'vue-router';
//3：手动安装 VueRouter
Vue.use(VueRouter);
// 4：导入 Account 组件
import account from './main/Account.vue';
// 5：导入 GoodsList 组件
import goodsList from './main/GoodsList.vue'; import app from './App.vue'; //6：创建 VueRouter 路由对象
var router = new VueRouter({
//Account GoodsList
routes:[
{ 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 //7：将路由对象挂载到 vm 上
}); //App 这个组件是通过 vm 实例的 render 函数渲染出来的， render 函数如果要渲染组件，渲染出来的组件只能放到 el：'#app' 所有指定的元素中；
//Account 和 GoodsList 组件是通过路由匹配监听到的，所以这两个组件只能展示到属于路由的 <router-view></router-view> 中去；
创建组件 Account.vue：
<template>
<div>
<h1>
这是 Account 组件
</h1>
</div>
</template> <script>
export default {
name: "account"
}
</script> <style scoped> </style>
创建 GoodsList.vue 组件：
<template>
<div>
<h1>
这是 GoodsList 组件
</h1>
</div>
</template> <script>
export default {
name: "GoodsList"
}
</script> <style scoped> </style>
创建 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>
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--这时容器-->
<div id="app"> </div>
</body>
</html>
展示效果：
创建子组件：
1：创建子组件 register.vue:
<template>
<div>
<h3>这是 Account 的注册子组件</h3>
</div>
</template> <script>
export default {
name: "register"
}
</script> <style scoped> </style>
2：创建子组件 login.vue：
<template>
<div>
<h3>这是 Account 的登录子组件</h3>
</div>
</template> <script>
export default {
name: "login"
}
</script> <style scoped> </style>
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>
export default {
name: "account"
}
</script> <style scoped> </style>
4：入口文件 main.js 修改为：
//`1：导入 vue 包
import Vue from 'vue';
//2：导入 vue-router 包
import VueRouter from 'vue-router';
//3：手动安装 VueRouter
Vue.use(VueRouter);
// 4：导入 Account 组件
import account from './main/Account.vue';
// 5：导入 GoodsList 组件
import goodsList from './main/GoodsList.vue'; import app from './App.vue'; //9：导入 account 中的两个子组件
import login from './subcom/login.vue';
import register from './subcom/register.vue' //6：创建 VueRouter 对象
var router = new VueRouter({
//Account GoodsList
routes:[
{
path: '/account',
component: account,
children: [//8：创建 account 的两个子组件
{ path: 'login', component: login},
{ path: 'register', component: register}
]
},
{ path: '/goodsList', component: goodsList},
]
}); var vm = new Vue({
el: "#app",
render: c => c(app), //render 会把 el 指定的容器中所有的内容都清空覆盖，所以不要把路由的 router-view 和 router-link 直接写到 el 所控制的元素中；
router //7：将路由对象挂载到 vm 上
}); //App 这个组件是通过 vm 实例的 render 函数渲染出来的， render 函数如果要渲染组件，渲染出来的组件只能放到 el：'#app' 所有指定的元素中；
//Account 和 GoodsList 组件是通过路由匹配监听到的，所以这两个组件只能展示到属于路由的 <router-view></router-view> 中去；
其中添加代码：
添加子组件后的显示效果：
注意：组件的 style 样式表：
- 普通的 style 标签只支持普通的样式，如果想要启用 scss 或者 less，需要为 style 元素设置 lang 属性 例如：<style lang="scss"></style>
- 只要 style 标签是在 .vue 组件中定义的，推荐为 style 标签开启 scoped 属性 例如：<style scoped></style>
- <style lang="scss" scoped></style>
抽离路由模块：
入口文件 main.js：
//`1：导入 vue 包
import Vue from 'vue';
import app from './App.vue';
//2：导入 vue-router 包
import VueRouter from 'vue-router';
//3：手动安装 VueRouter
Vue.use(VueRouter);
//4:导入被抽离的路由模块
import router from './router.js'; var vm = new Vue({
el: "#app",
render: c => c(app), //render 会把 el 指定的容器中所有的内容都清空覆盖，所以不要把路由的 router-view 和 router-link 直接写到 el 所控制的元素中；
router //7：将路由对象挂载到 vm 上
}); //App 这个组件是通过 vm 实例的 render 函数渲染出来的， render 函数如果要渲染组件，渲染出来的组件只能放到 el：'#app' 所有指定的元素中；
//Account 和 GoodsList 组件是通过路由匹配监听到的，所以这两个组件只能展示到属于路由的 <router-view></router-view> 中去；
被抽离出的路由模块 router.js：
//2：导入 vue-router 包
import VueRouter from 'vue-router'; // 4：导入 Account 组件
import account from './main/Account.vue';
// 5：导入 GoodsList 组件
import goodsList from './main/GoodsList.vue';
//9：导入 account 中的两个子组件
import login from './subcom/login.vue';
import register from './subcom/register.vue' //6：创建 VueRouter 对象
var router = new VueRouter({
//Account GoodsList
routes:[
{
path: '/account',
component: account,
children: [//8：创建 account 的两个子组件
{ path: 'login', component: login},
{ path: 'register', component: register}
]
},
{ path: '/goodsList', component: goodsList},
]
});
//将 router 对象暴露出去
export default router;
结合 webpack 使用 vue-router（七）的更多相关文章
- 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)
阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...
- 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)
1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...
- 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- webpack构建vue项目（配置篇）
最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- webpack配合vue.js实现完整的单页面demo
本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...
- 使用Webpack加速Vue.js应用的4种方式
Webpack是开发Vue.js单页应用程序的重要工具. 通过管理复杂的构建步骤,你可以更轻松地开发工作流程,并优化应用程序的大小和性能. 其中介绍下面四种方式: 单个文件组件 优化Vue构建 浏览器 ...
- 一个基于ES6+webpack的vue小demo
上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...
- Vue.js 2.x笔记：路由Vue Router（6）
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- 前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
随机推荐
- 最简单的 IntelliJ IDEA 中使用 GitHub 进行版本控制教程（持续更新中）
一.在 IntelliJ IDEA 中新建一个项目并提交到 GitHub 1. 运行 IDEA,点击[Create New Project],在 IDEA 中新建一个项目. 2. 在选择项目类型对话框 ...
- STM32 ~ JTAG、SWD和串口下载的问题
最近有一个项目用到STM32,为了使PCB布线方便一些所以改了一些引脚,占用了JTAG接口的PA15和PB3,所以要禁用一下JTAG,下载采用SWD模式.这样在实际操作中做出一些总结(方法网上都有.这 ...
- jmeter测试总结
一次性能测试的总结 相关推荐:Apusic应用服务器的性能调节_JVM优化 Apusic应用服务器作为企业应用的运行平台,系统的性能非常重要.当应用对性能的要求比较苛刻时,就要考虑是否需要改变系统的缺 ...
- 基于BASYS2的VHDL程序——数字钟（最终版）
转载请注明原地址:http://www.cnblogs.com/connorzx/p/3674178.html 调时电路正常工作.一切正常.发现做FPGA还是得从数电的思路思考,设置一个预置使能端,预 ...
- IPFS 到底是怎么工作的？
简介 我们知道,一个存储服务,最基本的功能就是存和取.IPFS 中提供了这两种语义,那就是 add 和 get 操作. 在 IPFS 系统中执行 add 操作,就是执行了一次存操作,放在网络的概念里, ...
- codeforces B. Trees in a Row 解题报告
题目链接:http://codeforces.com/problemset/problem/402/B 题目意思:给出n个数和公差k,问如何调整使得ai + 1 - ai = k.(1 ≤ i < ...
- linux应用之tomcat的安装及配置（centos）
CentOS 6.6下安装配置Tomcat环境 [日期:2015-08-25] 来源:Linux社区 作者:tae44 [字体:大 中 小] 实验系统:CentOS 6.6_x86_64 实验前 ...
- hdu-5728 PowMod(数论)
题目链接: PowMod Time Limit: 3000/1500 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others) ...
- C++类对象之间的类型转换和重载
类对象和其他类型对象的转换 转换场合有: 赋值转换 表达式中的转换 显式转换 函数调用, 传递参数时的转换 转换方向有: 由定义类向其他类型的转换 由其他类型向定义类的转换 #include < ...
- C/C++获取Windows系统CPU和内存及硬盘使用情况
//1.获取Windows系统内存使用率 //windows 内存 使用率 DWORD getWin_MemUsage(){ MEMORYSTATUS ms; ::GlobalMemoryStatus ...