在上一个项目的基础上进行的,所以基本的配置在这里就不赘述了。

一、结合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/

 import Vue from 'vue'
//1.导入 vue-router 包
import VueRouter from 'vue-router'
//2.手动安装 VueRouter
Vue.use(VueRouter)
import app from './App.vue'
import account from './main/Account.vue'
import goodList from './main/GoodList.vue'
//3.创建路由对象
var router = new VueRouter({
routes:[
{path:'/account',component:account},
{path:'/goodList',component:goodList}
]
})
var vm = new Vue({
el:'#app',
render:function(createElements){
return createElements(app)
},// render 会把 el 指定的容器中,所有的内容都清空覆盖,
//所以不要把路由的router-view和router-link直接写到 el 所控制的元素中
router//4.将路由对象挂载到vm对象上
})
// 注意: App这个组件是通过VM实例的render函数,渲染出来的,
// render函数如果要渲染组件, 渲染出来的组件,只能放到 el: '#app' 所指定的元素中;
// // Account 和 GoodsList 组件, 是通过路由匹配监听到的,所以, 这两个组件,只能展示到属于路由的<router-view></router-view> 中去;

main.js

最终效果:点击响应的选项显示

二、结合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

最新文章

  1. 总结:如何使用redis缓存加索引处理数据库百万级并发
  2. Centos7下用命令同步标准时间
  3. iframe的使用
  4. python闭包小例子
  5. We are 歪果仁带你灰
  6. mysql优化21条经验(转)
  7. Android ProgressDialog 加载进度
  8. Java模拟post-get提交
  9. 【Ansible 文档】【译文】配置文件
  10. iOS NSError
  11. c++,当const char*为0时,不能将其直接赋给string
  12. 01_Nginx入门
  13. CRM认识的误区
  14. 六. 异常处理9.finally块
  15. http 工作模式与模块
  16. JS脚本不能执行
  17. adb logcat 查看日志 (转载)
  18. FACVSPOW - Factorial vs Power 数学方法 + 二分
  19. Javascript阻止表单提交
  20. 【win】【qt5安装】【qt5.5.1安装及第一个示例make错误】

热门文章

  1. ASP.NET Core 2.1 中的 HttpClientFactory (Part 4) 整合Polly实现瞬时故障处理
  2. yii2 分页
  3. 前端:将网站打造成单页面应用SPA
  4. How to read a paper efficiently - by prof. Pete carr
  5. Eclipse项目工程导入到IDEA继续开发-超详细
  6. JUC之CountDownLatch和CyclicBarrier的区别 (转)
  7. Centos 修改yum源为aliyun
  8. Java 13 新特性
  9. C++构造函数和重载函数运算符如何区分
  10. 表结构修改以及sql增删改查