安装 vue-router

cnpm i vue-router -S

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>Document</title>
  9. </head>
  10.  
  11. <body>
  12. <div id="app">
  13. <app></app>
  14. </div>
  15. </body>
  16.  
  17. </html>

main.js

  1. import Vue from 'vue'
  2. // 1,导入 vue-router包
  3. import vueRouter from 'vue-router'
  4. // 导入app组件
  5. import app from './app.vue'
  6. // 导入其他组件
  7. import account from './components/account.vue'
  8. import goodslist from './components/goodslist.vue'
  9.  
  10. // 2,手动安装vueRouter
  11. Vue.use(vueRouter);
  12.  
  13. // 3,创建路由对象
  14. var router = new vueRouter({
  15. routes : [
  16. // account goodslist
  17. { path : '/account' , component : account},
  18. { path : '/goodslist' , component : goodslist}
  19. ]
  20. })
  21.  
  22. var vm = new Vue({
  23. el : '#app',
  24. render : c => c(app), // render会把el 指定的容器中所有的内容都清空覆盖
  25. // 所以不要把router-view和router-link直接写到 el 所控制的元素中。
  26. router
  27. })
  28. // 注意app这个组件是通过vm实例的render函数渲染的,render函数如果要渲染组件
  29. // 渲染出来的组件只能放到el : '#app' 所指定的元素中去。
  30. // account 和 goodslist组件是通过路由匹配监听到的,所以,这两个组件只能展示到
  31. // 属于路由的<router-view></router-view>中去。

app.vue

  1. <template>
  2. <div>
  3. <h1>app组件</h1>
  4.  
  5. <router-link to="/account">account</router-link>
  6. <router-link to="/goodslist">goodslist</router-link>
  7. <router-view>
  8.  
  9. </router-view>
  10. </div>
  11. </template>
  12.  
  13. <script>
  14. export default {
  15.  
  16. }
  17. </script>
  18.  
  19. <style lang="">
  20.  
  21. </style>

account.vue和goodslist.vue组件为简单的template。

路由嵌套 

在account组件中加上 登录和注册

main.js

  1. import Vue from 'vue'
  2. // 1,导入 vue-router包
  3. import vueRouter from 'vue-router'
  4. // 导入app组件
  5. import app from './app.vue'
  6. // 导入其他组件
  7. import account from './components/account.vue'
  8. import goodslist from './components/goodslist.vue'
  9. import login from './components/login.vue'
  10. import register from './components/register.vue'
  11. // 2,手动安装vueRouter
  12. Vue.use(vueRouter);
  13.  
  14. // 3,创建路由对象
  15. var router = new vueRouter({
  16. routes: [
  17. // account goodslist
  18. {
  19. path: '/account',
  20. component: account,
  21. children : [
  22. { path : 'login' , component : login},
  23. { path : 'register' , component : register}
  24. ]
  25. },
  26. {
  27. path: '/goodslist',
  28. component: goodslist
  29. }
  30. ]
  31. })
  32.  
  33. var vm = new Vue({
  34. el: '#app',
  35. render: c => c(app), // render会把el 指定的容器中所有的内容都清空覆盖
  36. // 所以不要把router-view和router-link直接写到 el 所控制的元素中。
  37. router
  38. })
  39. // 注意app这个组件是通过vm实例的render函数渲染的,render函数如果要渲染组件
  40. // 渲染出来的组件只能放到el : '#app' 所指定的元素中去。
  41. // account 和 goodslist组件是通过路由匹配监听到的,所以,这两个组件只能展示到
  42. // 属于路由的<router-view></router-view>中去。

account.vue

  1. <template>
  2. <div>
  3. <router-link to="/account/login">登录</router-link>
  4. <router-link to="/account/register">注册</router-link>
  5. <router-view></router-view>
  6. </div>
  7. </template>
  8.  
  9. <script>
  10. export default {
  11.  
  12. }
  13. </script>
  14.  
  15. <style lang="">
  16.  
  17. </style>

style中 lang属性和scoped 

  1. <style lang="scss" scoped>
  2. // scoped只让样式在当前组件生效
  3. /* 普通的style标签只支持普通的样式 */
  4. /* 要启用scss或less,需要为style元素设置lang属性 */
  5. body {
  6. div {
  7. color: green;
  8. }
  9. }
  10. </style>

抽离路由模块

需要把vuerouter,和引入的组件,抽离到router.js

router.js     需要注意:main.js和router.js 都需要导入vue-router

  1. // 导入其他组件
  2. import account from './components/account.vue'
  3. import goodslist from './components/goodslist.vue'
  4. import login from './components/login.vue'
  5. import register from './components/register.vue'
  6. import vueRouter from 'vue-router'
  7.  
  8. // 3,创建路由对象
  9. var router = new vueRouter({
  10. routes: [
  11. // account goodslist
  12. {
  13. path: '/account',
  14. component: account,
  15. children : [
  16. { path : 'login' , component : login},
  17. { path : 'register' , component : register}
  18. ]
  19. },
  20. {
  21. path: '/goodslist',
  22. component: goodslist
  23. }
  24. ]
  25. })
  26.  
  27. // 向外暴露 router
  28. export default router

Vue系列之 => 结合webpack使用vue-router的更多相关文章

  1. Vue系列(2):Vue 安装

    前言:关于页面上的知识点,如有侵权,请看 这里 . 关键词:小白.Vue 安装.Vue目录结构.Vue 构建页面流程 ? 初学者安装 vue 用什么好 大家都知道,学 Vue 最好还是去官网学,官网写 ...

  2. webpack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  3. webpack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  4. webpack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  5. Vue系列之 => webpack结合vue使用

    安装 npm i vue -S ,  在html页面中放一个容器绑定到el上. 修改webpack.config.js , 在与entry , output节点平级加上 resolve 节点. res ...

  6. Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  7. webpack构建vue项目(再谈配置)

    webpack配置起来确实麻烦,这不,之前用刚配好了vue1+的版本,结果在(部分)安卓机上测试,发现存在开启热加载(dev-server)的情况下不能识别vue语法的问题,试了很多方法,都没能很好的 ...

  8. webpack构建vue项目(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  9. webpack配合vue.js实现完整的单页面demo

    本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...

随机推荐

  1. iOS12系统应用发送普通邮实现发送

    iOS12系统应用发送普通邮实现发送 构建好邮件以后,可以发送该邮件.此时需要使用mailComposeDelegate属性,该属性用来设置委托,其语法形式如下: unowned(unsafe) va ...

  2. Mac解决某些命令失效问题

    PS:今天安装groovy,需要设置环境变量,vim -/.bash_profile,然后立马执行了source -/.bash_profile.最后,发现ls,more,vim等常用命令失效了.立马 ...

  3. [jzoj]2505.【NOIP2011模拟7.29】藤原妹红

    Link https://jzoj.net/senior/#main/show/2505 Description 在幻想乡,藤原妹红是拥有不老不死能力的人类.虽然不喜欢与人们交流,妹红仍然保护着误入迷 ...

  4. css样式的六种选择器

    css常用的选择器有: 1.标签选择器: 标签选择器,这种选择器影响范围大,建议尽量应用在层级选择器中. 如: *{margin:0;padding:0}   /* 影响所有的标签 */ div{co ...

  5. 对迭代器操作的python 模块

    import itertools import more_itertools 目前用到的more_itertools.ilen(range(10)) --->返回可迭代的数量.这回消耗迭代,小心 ...

  6. [LeetCode] Reaching Points 到达指定点

    A move consists of taking a point (x, y) and transforming it to either (x, x+y) or (x+y, y). Given a ...

  7. Java自学笔记

    1.标识符:字母,数字,下划线,美元符组成,不可以已数字开头,并且严格区分大小写 2.变量 有三个元素描述变量,变量类型,变量名,变量值 如何命名变量:首字母为 字母:下划线:“$“符号,其余部分为 ...

  8. Python全栈-magedu-2018-笔记7

    第三章 - Python 内置数据结构 线性结构 线性结构 可迭代 for ... in len()可以获取长度 通过下标可以访问 可以切片 学过的线性结构 列表.元组.字符串.bytes.bytea ...

  9. .net经典书籍

    C#敏捷开发实践 C#从现象到本质 NET开发经典名著:Visual Studio 2017高级编程(第7版) 代码大全(第2版) C#高级编程(第10版 C#6&.NET Core1.0)/ ...

  10. SM3杂凑算法Python语言实现——第三部分

    SM3杂凑算法实现--第三部分 一.SM3 密码概述        我们首先把需要用到的算法呈现出来,最后我们再考虑如何集合为一个库的方法,这一部分我们就开始编写一个新的算法:国家商用密码标准SM3密 ...