结合webpack使用vue-router和它的子路由,即路由嵌套
时间:2019-09-16
本文章向大家介绍结合webpack使用vue-router和它的子路由,即路由嵌套,主要包括结合webpack使用vue-router和它的子路由,即路由嵌套使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在上一个项目的基础上进行的,所以基本的配置在这里就不赘述了。
一、结合webpack使用vue-router
1.新建组件.vue文件
2.启用路由
安装插件cnpm i vue-router -S
PS:npm install name -save 简写(npm install name -S)
npm install name -save-dve 简写(npm install name -D)
vue-router:https://router.vuejs.org/zh/
1 import Vue from 'vue' 2 //1.导入 vue-router 包 3 import VueRouter from 'vue-router' 4 //2.手动安装 VueRouter 5 Vue.use(VueRouter) 6 import app from './App.vue' 7 import account from './main/Account.vue' 8 import goodList from './main/GoodList.vue' 9 //3.创建路由对象 10 var router = new VueRouter({ 11 routes:[ 12 {path:'/account',component:account}, 13 {path:'/goodList',component:goodList} 14 ] 15 }) 16 var vm = new Vue({ 17 el:'#app', 18 render:function(createElements){ 19 return createElements(app) 20 },// render 会把 el 指定的容器中,所有的内容都清空覆盖, 21 //所以不要把路由的router-view和router-link直接写到 el 所控制的元素中 22 router//4.将路由对象挂载到vm对象上 23 }) 24 // 注意: App这个组件是通过VM实例的render函数,渲染出来的, 25 // render函数如果要渲染组件, 渲染出来的组件,只能放到 el: '#app' 所指定的元素中; 26 // // Account 和 GoodsList 组件, 是通过路由匹配监听到的,所以, 这两个组件,只能展示到属于路由的<router-view></router-view> 中去;
最终效果:点击响应的选项显示
二、结合webpack实现children子路由
可以安装两个关于vue的插件,Vetur和Vue 2 Snippets
结果显示
三、style 标签的lang属性和scoped属性
<style lang="scss" scoped>
普通的style标签只支持普通的样式,如果想要启用 scss 或 less ,需要为 style 元素,设置 lang 属性
只要 style 标签 是在 .vue 组件中定义的,那么推荐都为 style 开启 scoped 属性
四、抽离路由模块
新建router.js
原文地址:https://www.cnblogs.com/sweetC/p/11521584.html
- SpringCloud注册中心集群搭建
- SpringCloud配置中心集群搭建
- HDU1846 Brave Game
- 拉格朗日插值
- python爬虫入门(二)Opener和Requests
- python爬虫入门(三)XPATH和BeautifulSoup4
- python爬虫入门(四)利用多线程爬虫
- LOJ #115. 无源汇有上下界可行流
- 数据库改名系列(数据库名,逻辑名,物理文件名)
- BZOJ1468: Tree
- 洛谷P3806 【模板】点分治1
- 探索ASP.NET MVC5系列之~~~5.缓存篇(页面缓存+二级缓存)
- 洛谷P3383 【模板】线性筛素数(Miller_Rabin)
- BZOJ3667: Rabin-Miller算法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android 仿余额宝数字跳动动画效果完整代码
- Android中判断listview是否滑动到顶部和底部的实现方法
- Android开发实现的简单媒体播放器功能示例
- Android中的颜色表示的详解
- android使用SoundPool播放音效的方法
- android中Context深入详解
- Android中Notification通知用法详解
- Android build文件的删除的方法
- Android自定义Notification添加点击事件
- 深入理解Android Bitmap
- Android基于AlarmManager实现用户在线心跳功能示例
- 详解Android中获取软键盘状态和软键盘高度
- Android流式布局FlowLayout详解
- Linux 专题
- Go语言实现UDP通信