Vue系列之 => 结合webpack使用vue-router
安装 vue-router
cnpm i vue-router -S
index.html
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Document</title>
- </head>
- <body>
- <div id="app">
- <app></app>
- </div>
- </body>
- </html>
main.js
- import Vue from 'vue'
- // 1,导入 vue-router包
- import vueRouter from 'vue-router'
- // 导入app组件
- import app from './app.vue'
- // 导入其他组件
- import account from './components/account.vue'
- import goodslist from './components/goodslist.vue'
- // 2,手动安装vueRouter
- Vue.use(vueRouter);
- // 3,创建路由对象
- var router = new vueRouter({
- routes : [
- // account goodslist
- { 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
- })
- // 注意app这个组件是通过vm实例的render函数渲染的,render函数如果要渲染组件
- // 渲染出来的组件只能放到el : '#app' 所指定的元素中去。
- // account 和 goodslist组件是通过路由匹配监听到的,所以,这两个组件只能展示到
- // 属于路由的<router-view></router-view>中去。
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>
- export default {
- }
- </script>
- <style lang="">
- </style>
account.vue和goodslist.vue组件为简单的template。
路由嵌套
在account组件中加上 登录和注册
main.js
- import Vue from 'vue'
- // 1,导入 vue-router包
- import vueRouter from 'vue-router'
- // 导入app组件
- import app from './app.vue'
- // 导入其他组件
- import account from './components/account.vue'
- import goodslist from './components/goodslist.vue'
- import login from './components/login.vue'
- import register from './components/register.vue'
- // 2,手动安装vueRouter
- Vue.use(vueRouter);
- // 3,创建路由对象
- var router = new vueRouter({
- routes: [
- // account goodslist
- {
- path: '/account',
- component: account,
- children : [
- { 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
- })
- // 注意app这个组件是通过vm实例的render函数渲染的,render函数如果要渲染组件
- // 渲染出来的组件只能放到el : '#app' 所指定的元素中去。
- // account 和 goodslist组件是通过路由匹配监听到的,所以,这两个组件只能展示到
- // 属于路由的<router-view></router-view>中去。
account.vue
- <template>
- <div>
- <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 lang="">
- </style>
style中 lang属性和scoped
- <style lang="scss" scoped>
- // scoped只让样式在当前组件生效
- /* 普通的style标签只支持普通的样式 */
- /* 要启用scss或less,需要为style元素设置lang属性 */
- body {
- div {
- color: green;
- }
- }
- </style>
抽离路由模块
需要把vuerouter,和引入的组件,抽离到router.js
router.js 需要注意:main.js和router.js 都需要导入vue-router
- // 导入其他组件
- import account from './components/account.vue'
- import goodslist from './components/goodslist.vue'
- import login from './components/login.vue'
- import register from './components/register.vue'
- import vueRouter from 'vue-router'
- // 3,创建路由对象
- var router = new vueRouter({
- routes: [
- // account goodslist
- {
- path: '/account',
- component: account,
- children : [
- { path : 'login' , component : login},
- { path : 'register' , component : register}
- ]
- },
- {
- path: '/goodslist',
- component: goodslist
- }
- ]
- })
- // 向外暴露 router
- export default router
Vue系列之 => 结合webpack使用vue-router的更多相关文章
- Vue系列(2):Vue 安装
前言:关于页面上的知识点,如有侵权,请看 这里 . 关键词:小白.Vue 安装.Vue目录结构.Vue 构建页面流程 ? 初学者安装 vue 用什么好 大家都知道,学 Vue 最好还是去官网学,官网写 ...
- webpack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- webpack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- webpack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- Vue系列之 => webpack结合vue使用
安装 npm i vue -S , 在html页面中放一个容器绑定到el上. 修改webpack.config.js , 在与entry , output节点平级加上 resolve 节点. res ...
- Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- webpack构建vue项目(再谈配置)
webpack配置起来确实麻烦,这不,之前用刚配好了vue1+的版本,结果在(部分)安卓机上测试,发现存在开启热加载(dev-server)的情况下不能识别vue语法的问题,试了很多方法,都没能很好的 ...
- webpack构建vue项目(配置篇)
最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...
- webpack配合vue.js实现完整的单页面demo
本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...
随机推荐
- iOS12系统应用发送普通邮实现发送
iOS12系统应用发送普通邮实现发送 构建好邮件以后,可以发送该邮件.此时需要使用mailComposeDelegate属性,该属性用来设置委托,其语法形式如下: unowned(unsafe) va ...
- Mac解决某些命令失效问题
PS:今天安装groovy,需要设置环境变量,vim -/.bash_profile,然后立马执行了source -/.bash_profile.最后,发现ls,more,vim等常用命令失效了.立马 ...
- [jzoj]2505.【NOIP2011模拟7.29】藤原妹红
Link https://jzoj.net/senior/#main/show/2505 Description 在幻想乡,藤原妹红是拥有不老不死能力的人类.虽然不喜欢与人们交流,妹红仍然保护着误入迷 ...
- css样式的六种选择器
css常用的选择器有: 1.标签选择器: 标签选择器,这种选择器影响范围大,建议尽量应用在层级选择器中. 如: *{margin:0;padding:0} /* 影响所有的标签 */ div{co ...
- 对迭代器操作的python 模块
import itertools import more_itertools 目前用到的more_itertools.ilen(range(10)) --->返回可迭代的数量.这回消耗迭代,小心 ...
- [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 ...
- Java自学笔记
1.标识符:字母,数字,下划线,美元符组成,不可以已数字开头,并且严格区分大小写 2.变量 有三个元素描述变量,变量类型,变量名,变量值 如何命名变量:首字母为 字母:下划线:“$“符号,其余部分为 ...
- Python全栈-magedu-2018-笔记7
第三章 - Python 内置数据结构 线性结构 线性结构 可迭代 for ... in len()可以获取长度 通过下标可以访问 可以切片 学过的线性结构 列表.元组.字符串.bytes.bytea ...
- .net经典书籍
C#敏捷开发实践 C#从现象到本质 NET开发经典名著:Visual Studio 2017高级编程(第7版) 代码大全(第2版) C#高级编程(第10版 C#6&.NET Core1.0)/ ...
- SM3杂凑算法Python语言实现——第三部分
SM3杂凑算法实现--第三部分 一.SM3 密码概述 我们首先把需要用到的算法呈现出来,最后我们再考虑如何集合为一个库的方法,这一部分我们就开始编写一个新的算法:国家商用密码标准SM3密 ...