一、在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>