vue-router实例

最近刚刚用vue写了个公司项目,使用vue-cli构建的,算是中大型项目吧,然后这里想记录并且分享一下其中的知识点,希望对大家有帮助,后期会逐渐分享;话不多说,直接上代码!!

app.vue

 1 <template>
 2   <div id="app">
 3     <router-view></router-view>
 4   </div>
 5 </template>
 6 
 7 <script>
 8 export default {
 9   name: 'app'
10 }
11 </script>
12 
13 <style>
14 
15 </style>

 

main.js

 1 // The Vue build version to load with the `import` command
 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 import Vue from 'vue'
 4 import App from './App'
 5 import router from './router'
 6 import './assets/css/common.css'
 7 
 8 Vue.config.productionTip = false
 9 
10 /* eslint-disable no-new */
11 new Vue({
12   el: '#app',
13   router,
14   template: '<App/>',
15   components: { App }
16 })

router文件夹里面的index.js

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 import home from '../components/home'    //这里可以选择2种写法,一种是写在这里,一种是写在component里面,看下方代码~
 4 
 5 Vue.use(Router)
 6 
 7 export default new Router({
 8       mode:'history',
 9       routes: [
10         {
11           path: '/',
12           component: home
13         },
14         {
15             path:'/pagevue',
16             component:pagevue => require(['../components/childCom/pagevue.vue'], pagevue),
17         },
18         {
19             path:'/nextpagevue',
20             component:nextpagevue => require(['../components/childCom/nextpagevue.vue'], nextpagevue),
21         }
22     ]
23 })

home.vue

 1 <template>
 2     <div class="homeMain">
 3         <div>我是首页</div>
 4         <div class="routerName" @click="clickMe">点我进下一个路由</div>
 5     </div>
 6 </template>
 7 <script>
 8 export default{
 9     data(){
10         return{
11 
12         }
13     },
14     methods:{
15         clickMe(){
16             this.$router.push({path:'/pagevue'})
17         }
18     }
19 }
20 </script>
21 <style>
22 </style>

pagevue.vue

 1 <template>
 2     <div class="homeMain">
 3         <div>我是子页面</div>
 4         <div class="routerName" @click="returnhome">点我继续进下一个路由</div>
 5     </div>
 6 </template>
 7 <script type="text/javascript">
 8     export default{
 9         methods:{
10             returnhome(){
11                 this.$router.push({path:'/nextpagevue'})
12             }
13         }
14     }
15 </script>

nextpagevue.vue

 1 <template>
 2     <div class="homeMain">
 3         <div>我是另外一个子页面</div>
 4         <div class="routerName" @click="clickGohome">点我回到首页</div>
 5     </div>
 6 </template>
 7 <script type="text/javascript">
 8     export default{
 9         methods:{
10             clickGohome(){
11                 this.$router.push({path:'/'})
12             }
13         }
14     }
15 </script>

common.css

 1 * {
 2   margin: 0;
 3   padding: 0; }
 4 .homeMain {
 5   text-align: center;
 6   margin-top: 100px; }
 7   .homeMain .routerName {
 8     color: #1eb89c;
 9     border: 1px solid #1eb89c;
10     margin-top: 20px; }
11 
12 /*# sourceMappingURL=common.css.map */

 

转载于:https://www.cnblogs.com/silent007/p/8109822.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/252605.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React学习小结(二)

一、组件的嵌套 1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset"UTF-8">5 <title></title>6 <script src"react.min.js" type"text/javascript" charset"utf-8"></script>7 <…

PCIE2.0/PCIE3.0/PCIE4.0/PCIE5.0接口的带宽、速率计算

一、PCIE接口速率&#xff1a; 二、PCIE相关概念&#xff1a; 传输速率为每秒传输量GT/s&#xff0c;而不是每秒位数Gbps&#xff0c;因为传输量包括不提供额外吞吐量的开销位&#xff1b; 比如 PCIe 1.x和PCIe 2.x使用8b / 10b编码方案&#xff0c;导致占用了20% &#xff08…

华为交换机同一vlan不同网段的通信

在VLANIF接口下配置主从IP地址&#xff0c;可以实现同一VLAN多个网段用户间的互通。 某VLAN10内两个主机Host_1和Host_2分别属于网段10.1.1.1/24和10.1.2.1/24&#xff0c;要求两主机互通。 可以在Switch上进行如下配置&#xff1a; [Switch] interface gigabitethernet 0/0/1 …

hql语法

HQL查询&#xff1a;Criteria查询对查询条件进行了面向对象封装&#xff0c;符合编程人员的思维方式&#xff0c;不过HQL(Hibernate Query Lanaguage)查询提供了更加丰富的和灵活的查询特性&#xff0c;因此Hibernate将HQL查询方式立为官方推荐的标准查询方式&#xff0c;HQL查…

四五月份:关键词是沟通、绘画和SQL

例行总结一下四五月份的感受。 关键词有三个&#xff1a;沟通、绘画和SQL。 整体来说&#xff0c;这两个月在努力跟这三个关键词死磕&#xff0c;略有些进展&#xff0c;因此汇报一下。 虽然这三个关键词从重要度来说是从左到右的&#xff0c;但从叙述来讲&#xff0c;还是先从…

InfiniBand简介

一&#xff0e;什么是infiniband InfiniBand架构是一种支持多并发链接的“转换线缆”技术&#xff0c;它是新一代服务器硬件平台的I/O标准。由于它具有高带宽、低延时、 高可扩展性的特点&#xff0c;它非常适用于服务器与服务器&#xff08;比如复制&#xff0c;分布式工作等…

程序员的视角:java GC

GC&#xff08;Garbage Collection 垃圾回收&#xff09;的概念随着 java 的流行而被人们所熟知。 实际 GC 最早起源于20世纪60年代的 LISP 语言&#xff0c;是一种自动的内存管理机制。 GC 要解决的问题有 3 个&#xff1a;1. 回收什么&#xff1f;&#xff08;what&#xff0…

spring mvc拦截器HandlerInterceptor

本文主要介绍springmvc中的拦截器&#xff0c;包括拦截器定义和的配置&#xff0c;然后演示了一个链式拦截的测试示例&#xff0c;最后通过一个登录认证的例子展示了拦截器的应用 拦截定义 定义拦截器&#xff0c;实现HandlerInterceptor接口。接口中提供三个方法。 public cla…

mysql show 语句大全

mysql show 语句大全 show open tables; 基于本人对MySQL的使用&#xff0c;现将常用的MySQL show 语句列举如下&#xff1a; 1.show databases ; // 显示mysql中所有数据库的名称 2.show tables [from database_name]; // 显示当前数据库中所有表的名称 3.show columns from …

阿里云Aliplayer高级功能介绍(一):视频截图

基本介绍H5 Video是不提供截图的API的&#xff0c; 视频截图需要借助Canvas&#xff0c;通过Canvas提供的drawImage方法&#xff0c;把Video的当前画面渲染到画布上&#xff0c; 最终通过toDataURL方法可以导出图片的base64编码&#xff0c;基本就完成了图片截图的功能。 功能实…

POJ 1151 Atlantis 线段树+扫描线

解题思路: 先将y轴进行离散化。n个矩形的2n个横边纵坐标共构成最多2n-1个区间的边界&#xff0c;对这些区间编号&#xff0c;建立起线段树。 x轴记录左边和右边&#xff0c;左边时是矩形面积增加&#xff0c;覆盖层数增加边&#xff0c;右边是形面积减少&#xff0c;覆盖层数减…

分页

1.首先在数据库中建立一个视图&#xff08;在aspx中sql查询语句是view_student不是student&#xff09;&#xff0c;在视图里创建create view view_student--创建视图as row_number 行号 一条数据是一行 分页功能要根据行数运算select *,row_number() over(order by stuNo desc…

NFS服务端的安装

执行以下四步操作即可完成在虚拟机上安装完成NFS的服务端&#xff1a;第一步&#xff1a;在虚拟机上安装nfs服务&#xff1a; sudo apt install nfs-kernel-server 第二步&#xff1a;修改文件 sudo vi /etc/exports 在文件末尾增加 /home/zzf/hisi-sdk 192.16…

【C++STL/红黑树】POJ 3481 DoubleQueue

POJ 3481 Double Queue 描述&#xff1a; 新成立的BIG-Bank在不切雷斯特开了一间新办公室,使用了由IBM罗马尼亚的现代计算机办公环境,运用了现代信息技术.一般来说,银行的每个顾客都有一个识别码K,并且每一个来银行的顾客都会被给予一个优先级P.银行主管的一个大胆想法震惊了公…

基础表单笔记

表单数据要向服务端提交的话 每个表单都要指定一些属性就是name""和value"" value就是用户写什么就是什么 来提交name就是对这个表单进行一个标识 <from> 输入用户名<input type"text" name"user" value""/>这…

PCIE总线-PCI、PCIE关系及信号定义

PCI(Peripheral Component Interconnect)总线规范在上世纪九十年代由Intel提出。在处理器体系结构中&#xff0c;PCI总线属于局部总线(Local Bus)。局部总线作为系统总线的延伸&#xff0c;主要功能是为了连接外部设备。 处理器主频的不断提升&#xff0c;要求速度更快&#x…

SQL Server:SQL Like 通配符特殊用法:Escape

%&#xff1a;匹配零个及多个任意字符&#xff1b; _&#xff1a;与任意单字符匹配&#xff1b; []&#xff1a;匹配一个范围&#xff1b; [^]&#xff1a;排除一个范围 &#xff1b;-&#xff1a;连字符 Symbol Meaning like 5[%] 5% like [_]n _n like [a-cdf] a, b, c, d, o…

案例篇-HBase RowKey 设计指南

1.为什么 Rowkey 这么重要 1.1 RowKey 到底是什么 我们常说看一张 HBase 表设计的好不好&#xff0c;就看它的 RowKey 设计的好不好。可见 RowKey 在 HBase 中的地位。那么 RowKey 到底是什么?RowKey 的特点 如下: 类似于 MySQL、Oracle 中的主键&#xff0c;用于标示唯一的行…

PCIe简介及引脚定义

随着现代处理器技术的发展&#xff0c;在互连领域中&#xff0c;使用高速差分总线替代并行总线是大势所趋。与单端并行信号相比&#xff0c;高速差分信号可以使用更高的时钟频率&#xff0c;从而使用更少的信号线&#xff0c;完成之前需要许多单端并行数据信号才能达到的总线带…