本文主要讲述：通过vue.js 编程导航，实现路由配置和跳转页面的功能！

基础篇，仅作为简单演示。

---

总结

1. 不能保证用户一定会点击某些按钮
2. 并且当前操作，除了路由跳转以外，还会有一些别的附加操作（比如执行完了再跳转）
3. 通过 this.$router.go，根据浏览器记录，完成 前进、后退【即：翻页功能】
4. 通过this.$router.push，实现了直接跳转到某个页面的显示【即：直接跳转到指定页面】
   ---- push参数：字符串 /xxx
   ---- 对象：{name:'xxx'}或者{name:'xxx',query:{id:1},params:{name:2}}

#####注意：
query和params的使用区别

---

效果预览：

1. “跳转到音乐”之前

2. “跳转到音乐”之后

---

相关文件代码如下：

1. main.js文件

import Vue from 'vue';
import VueRouter from 'vue-router';
//引入主体（页面初始化显示）
import App from './components/app.vue';
//一个个link对象 - 分类
import Music from './components/music.vue';
import Movie from './components/movie.vue';

//安装插件
Vue.use(VueRouter);//挂载属性

//创建路由对象并配置路由规则
let router = new VueRouter({
    
	//routes
	routes: [
	//一个个link对象
    {
    name: 'music',path: '/music_country',component: Music},
    {
    name: 'movie',path: '/movie',component: Movie}
  ]
});

/* new Vue 启动 */
new Vue({
    
  el: '#app',
  render: c => c(App),
  //让vue知道我们的路由规则
  router:router,//可以简写为router
})

---

2. app.vue文件

<template>
  <div>
  	<div class="header">
  		头部 - 导航栏目
  	</div>
  	
  	<!--留坑，非常重要-->
		<router-view class="main"></router-view>
		
		<button @click="goMuisc">跳转到音乐</button>
		
		
		<div class="footer">底部 - 版权信息</div>
		
  </div>
</template>

<script>
	export default {
    
	  data(){
    
	  	return{
    
	  		
	  	}
	  },
	  methods:{
    
	  	goMuisc(){
    
	  		//第一种跳转方法
				this.$router.push('/music_country');  //此处的名称必须和main.js路由规则配置的path值一致
				
	  	}
	  }
	}
</script>

<style scoped>
	.header,.main,.footer{
    text-align: center;padding: 10px;}
	
	.header{
    height:70px;background: yellowgreen;}
	.main{
    height:300px;background: skyblue;}
	.footer{
    height: 100px;background: hotpink;}
</style>

---

3. music.vue文件

<template>
  <div>
  	我是音乐
  	<button @click="goMovie">跳转到电影</button>
  	<button @click="goback">返回上一页</button>
  	<button @click="next">继续下一页</button>
  </div>
</template>

<script>
	export default {
    
	  data(){
    
	    return{
    
	     
	    }
	  },
	  methods:{
    
	  	goMovie(){
    
	  		this.$router.push({
    
	  			name:'movie'
	  		});
	  	},
	  	goback(){
    //后退：返回上一页
				this.$router.go(-1);
			},
	  	next(){
    //前进：继续下一页
				this.$router.go(1);
			}
	  }
	}
</script>


<style scoped>
</style>

---

4. movie.vue文件

<template>
	<div>
		我是电影
		<button @click="goback">返回上一页</button>
	</div>
</template>

<script>
	export default{
    
		data(){
    
			return{
    
				
			}
		},
		methods:{
    
			goback(){
    
				this.$router.go(-1);
			}
		}
	}
</script>

<style scoped>	
</style>

---

---

相关文章

序号	文章 / 链接
1	如何使用router-link对象方式传递参数？
2	vue.js 编程导航如何传递参数
3	vue-router配置介绍和使用方法（一）
4	vue-router配置介绍和使用方法（二）
5	vue-router配置介绍和使用方法（三）

---

以上就是关于”关于vue.js 编程导航的使用：实现路由配置和跳转页面“的全部内容。