vue-router实例
最近刚刚用vue写了个公司项目,使用vue-cli构建的,算是中大型项目吧,然后这里想记录并且分享一下其中的知识点,希望对大家有帮助,后期会逐渐分享;话不多说,直接上代码!!
app.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template> <script>
export default {
name: 'app'
}
</script> <style> </style>
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import './assets/css/common.css' Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
router文件夹里面的index.js
import Vue from 'vue'
import Router from 'vue-router'
import home from '../components/home' //这里可以选择2种写法,一种是写在这里,一种是写在component里面,看下方代码~ Vue.use(Router) export default new Router({
mode:'history',
routes: [
{
path: '/',
component: home
},
{
path:'/pagevue',
component:pagevue => require(['../components/childCom/pagevue.vue'], pagevue),
},
{
path:'/nextpagevue',
component:nextpagevue => require(['../components/childCom/nextpagevue.vue'], nextpagevue),
}
]
})
home.vue
<template>
<div class="homeMain">
<div>我是首页</div>
<div class="routerName" @click="clickMe">点我进下一个路由</div>
</div>
</template>
<script>
export default{
data(){
return{ }
},
methods:{
clickMe(){
this.$router.push({path:'/pagevue'})
}
}
}
</script>
<style>
</style>
pagevue.vue
<template>
<div class="homeMain">
<div>我是子页面</div>
<div class="routerName" @click="returnhome">点我继续进下一个路由</div>
</div>
</template>
<script type="text/javascript">
export default{
methods:{
returnhome(){
this.$router.push({path:'/nextpagevue'})
}
}
}
</script>
nextpagevue.vue
<template>
<div class="homeMain">
<div>我是另外一个子页面</div>
<div class="routerName" @click="clickGohome">点我回到首页</div>
</div>
</template>
<script type="text/javascript">
export default{
methods:{
clickGohome(){
this.$router.push({path:'/'})
}
}
}
</script>
common.css
* {
margin:;
padding:; }
.homeMain {
text-align: center;
margin-top: 100px; }
.homeMain .routerName {
color: #1eb89c;
border: 1px solid #1eb89c;
margin-top: 20px; } /*# sourceMappingURL=common.css.map */
vue-router实例的更多相关文章
- [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦
一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...
- 「进阶篇」Vue Router 核心原理解析
前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配 ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- vue router 只需要这么几步
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤
通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...
- Vue Router的懒加载路径
单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的 ...
- Vue Router的入门以及简单使用
Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...
- vue router 几种方式对比 (转载)
<div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导 ...
随机推荐
- JAVAWEB开发环境搭建,附JDK开发环境一键配置批处理bat
JDK配置: CLASSPATH: .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar JAVA_HOME: C:\Program Files\J ...
- 基于QEMU的ARM Cortex-A9开发板Vexpress-ca9的Linux内核的编译和运行
宿主机:Ubuntu16.04 x64(Linux内核4.4.0) 交叉编译工具链:gcc-arm-linux-gnueabiarm-linux-gcc:4.4.3QEMU:2.5.0Linux ke ...
- 一款非常推荐的用户界面插件----EasyUI
前 言 easyui是一种基于jQuery的用户界面插件集合. easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能. 使用easyui你不需要写很多代码,你只需要 ...
- openstack学习心得:keystone 常用命令(M版)
查看用户列表 openstack user list 查看用户具体信息 usage: openstack user show [-h] [-f {html,json,json,shell,table, ...
- C#设计模式之十四模板方法模式(Template Method)【行为型】
一.引言 “结构型”的设计模式已经写完了,从今天我们开始讲“行为型”设计模式.现在我们开始讲[行为型]设计模式的第一个模式,该模式是[模板方法],英文名称是:Template Method Patte ...
- 如何自学Python?
关于如何自学Python,我也是有话说的.来看看? Python具有丰富和强大的类库,常被称为胶水语言.而且语法简洁而清晰,功能强大且简单易学,因而得到了广泛应用和支持.它特别适合专家使用,也非常适 ...
- bootstrap-wysihtml5设置值
今天做项目的时候用到了 bootstrap-wysihtml5,添加完一篇文章返回去继续添加的时候,js已经设置了将所有变量的值清空,但是不管用$('#someId').val(")还是$( ...
- [转载] Lucene 工作原理
转载自http://www.cnblogs.com/dewin/archive/2009/11/24/1609905.html Lucene是一个高性能的java全文检索工具包,它使用的是倒排文件索引 ...
- SDN/NFV趋势思考点滴
一.为什么控制器.网管OSS融合? 1.云化是趋势:传统网络架构管理规模达到瓶颈:微服务架构通过扩充多实例解决管理规模问题.2.NFV是趋势:设备运营商传统网元在云化,以软件形式提供VNF:3.运维体 ...
- iOS swift的xcworkspace多项目管理(架构思想)
iOS swift的xcworkspace多项目管理(架构思想) 技术说明: 今天在这里分享 swift下的 xcworkspace多项目管理(架构思想),能为我们在开发中带来哪些便捷?能为我们对整 ...