2018-8-30-router的自我反思与总结二
一、在mian.js 中的思考
//引入一堆
import Vue from 'vue';
import VueRouter from 'vue-router';
//主体
import App from './components/app.vue';
//路由切换页面
import Music from './components/music.vue'
import Movie from './components/movie.vue'
//安装插件，挂载属性
Vue.use(VueRouter);
//创建路由对象并配置路由规则
let router = new VueRouter({
//routes，这里的 routes 就是我们定义的路由规则
routes: [
//一个个对象
{ name: 'music', path: '/music1', component: Music },
{ path: '/movie', component: Movie }
]
});
//new Vue 启动
new Vue({
el: '#app',
//让vue知道我们的路由规则
router, //可以简写router
render: c => c(App),
})
二、在 app.vue 中 代码
<template>
<div>
<div class="h">头部
<!-- <a href="#/mymusic">进入音乐1</a>
<a href="#/movie">进入电影1</a>
<a href="#/mymusic">进入音乐2</a>
<a href="#/movie">进入电影2</a>
<a href="#/mymusic">进入音乐3</a>
<a href="#/movie">进入电影3</a> -->
<!-- 1:去哪里 -->
<router-link :to="{name:'music'}">进入音乐1</router-link>
<router-link :to="{name:'music'}">进入音乐2</router-link>
<router-link :to="{name:'music'}">进入音乐3</router-link>
<!-- 也可以跟路径使用 -->
<router-link to="/movie">进入电影</router-link>
</div>
<!-- 留坑，非常重要 -->
<router-view class="b"></router-view>
<div class="f">底部</div>
</div>
</template>
<script>
export default {
data(){
return {
}
}
}
</script>
<style scoped>
.h{
height: 100px;
background-color: yellowgreen;
}
.b{
height: 100px;
background-color: skyblue;
}
.f{
height: 100px;
background-color: hotpink;
}
</style>
三、子组件的代码
<template>
<div>
我是电影
</div>
</template>
<script>
export default {
data(){
return {
}
}
}
</script>
<style>
</style>
<template>
<div>
我是音乐
</div>
</template>
<script>
export default {
data(){
return {
}
}
}
</script>
<style>
</style>
**************************************
一、main.js代码
//引入一堆
import Vue from 'vue';
import VueRouter from 'vue-router';
//主体
import App from './components/app.vue';
//路由切换页面
import Music from './components/music.vue'
import Movie from './components/movie.vue'
//安装插件，挂载属性
Vue.use(VueRouter);
//创建路由对象并配置路由规则
let router = new VueRouter({
//routes
routes: [
//一个个对象
{ name: 'music', path: '/music', component: Music },
{ name: 'movie', path: '/movie', component: Movie }
]
});
//new Vue 启动
new Vue({
el: '#app',
//让vue知道我们的路由规则
router, //可以简写router
render: c => c(App),
})
二、app.vue的代码
<template>
<div>
<div class="h">头部</div>
<!-- 留坑，非常重要 -->
<router-view class="b"></router-view>
<div class="f">底部</div>
<button @click="goMuisc">跳转到音乐</button>
<button @click="testParams">测试编程导航传递参数</button>
</div>
</template>
<script>
export default {
data(){
return {
}
},methods:{
goMuisc(){
this.$router.push('/music');
},
testParams(){
//查询字符串的方式 /music?id=1&name=2
this.$router.push({
name:'music',query:{ id:1,name:2 }
});
}
}
}
</script>
<style scoped>
.h{
height: 100px;
background-color: yellowgreen;
}
.b{
height: 100px;
background-color: skyblue;
}
.f{
height: 100px;
background-color: hotpink;
}
</style>
三、子模块代码
<template>
<div>
我是电影
<button @click="goback">向上一页</button>
</div>
</template>
<script>
export default {
data(){
return {
}
},methods:{
goback(){
this.$router.go(-1); //-1上一次记录
}
}
}
</script>
<style>
</style>
<template>
<div>
我是音乐
<button @click="goMovie">跳转到电影</button>
<button @click="goback">向上一页</button>
<button @click="go">向下一页</button>
</div>
</template>
<script>
export default {
data(){
return {
}
},methods:{
goMovie(){
this.$router.push({
name:'movie'
})
},
goback(){
this.$router.go(-1); //后退
}
,go(){
this.$router.go(1);//前进
}
}
}
</script>
<style>
</style>
2018-8-30-router的自我反思与总结二相关推荐
- DayDayUp：吴晓波—2018.12.30年终秀——《预见2019：国运70》演讲重点概览【文字+视频】
DayDayUp:吴晓波-2018.12.30年终秀--<预见2019:国运70>演讲重点概览[文字+视频] 目录 一.回顾2018 回看2017年终秀的8个预言 五大悬念 二.展望201 ...
- 10天精读掌握：计算机组成与设计COAD:Patterson and Hennessy 第5天 2018/10.30
10天精读掌握:计算机组成与设计COAD:Patterson and Hennessy 第5天 2018/10.30 1. 第4次周计划概览 2. 今日学习成果 3. 今日时间表 4. 今日反思 今天 ...
- 自我反思--table的简单数据分页
自我反思 几天没有写工作总结了,整个人都变得懒散了.公司的工作也确实是不紧张,对于我这种自制力不强的人简直是...(想不到词了),完全放了风了... 每天逛逛淘宝,买些乱七八糟其实并没有什么用 ...
- VScode 乱装插件环境破坏踩坑自我反思总结
VScode 乱装插件环境破坏踩坑自我反思总结 1.2021-01-18早上由于百度 <Vscode 常用插件推荐>,瞎装了插件,把自己的Vscode环境给破坏了 2.在文件-首选项-设置 ...
- Crawler：基于urllib+requests库+伪装浏览器实现爬取国内知名招聘网站，上海地区与机器学习有关的招聘信息(2018.4.30之前)并保存在csv文件内
Crawler:基于urllib+requests库+伪装浏览器实现爬取国内知名招聘网站,上海地区与机器学习有关的招聘信息(2018.4.30之前)并保存在csv文件内 目录 输出结果 设计思路 核心 ...
- 2018.07.30 巴别时代
* 项目部署更新 用符号链接 project => project1, project2 ln -s project2 project * composer自动加载机制 namespace =& ...
- 暑期训练日志----2018.7.30
暑假训练第一天. 开始搞<数学一本通>的内容,上午只看了 整除 与 同余 短短的两节,效率太低,而且以前学过的快速幂的内容记的不牢固,去翻以前的博客重学了一遍,总体而言,上午浪费了太多时间 ...
- 考研复试英语介绍计算机专业,2018计算机考研复试英语自我介绍范本及重点
考研复试自我介绍一般包括五个部分:1.开场白 2.姓名,英文名,毕业院校,毕业专业 3. 为什么想读研 4. 将来愿意从事的方向,读研时的打算 5.结束语.每一部分都很关键,但是考生在介绍的时候也要有 ...
- 2018/11/30 快手面试总结
2018/11/30 快手面试总结 1.简历还需要优化调整: 2.面试官会提问一些基础和算法(也会让你手写代码) 比如: 二叉树的中序遍历 ArrayList删除中间元素的代码手写 spring Be ...
最新文章
- HDU5443（ST表）
- 安装nginx1.8
- [ACM_几何] Pipe
- 英文文献中的数学符号
- Coursera课程Python for everyone：chapter6
- [architecture]-ARM AMBA/AXI/ACE/LITE总线介绍
- python 安装包时出现红字_Python从入门到就业-1.1节：安装Python
- C++Template 模版的本质
- object怎么转list_PaddleOCR识别模型转Pytorch全流程记录
- Oracle 宣布 Java EE 8 推迟到2017年年底发布
- jmeter安装包双击没反应_Jmeter下载安装及使用
- 微积分知识点回顾与总结（二）极限
- 国外遥感影像如何下载之利用USGS网站影像下载无需JAVA
- Latex bare_jrnl模板报错：something‘s wrong--perhaps a missing\item. \end{thebibliography}
- 5G知识之5G技术指标、应用场景及相关技术（零星版）
- 用计算机撩人套路,各种撩人的套路句子40句
- Db2数据库：日期函数DATE函数
- 输出字符矩形--实心、空心
- 名帖57 虞世南 小楷《演连珠》
- html width 100 无效,html css 样式中100%width 仍有白边解决办法