vue-router配置介绍和使用方法（三）

---

---

一劳永逸的router-link路由的配置办法？

vue-router路由设置

需求目的：通过<a></a>标签的点击，实现页面的数据跳转

要点：

【一劳永逸的方法】，请参考本文；

请仔细对比学习：

1. 效果图对比
2. 浏览器的路径效果
3. main.js中相关路由的name、path的配置设置。

---

实现效果对比：

---

主要文件的代码如下：

app.vue文件

<template>
  <div>
  	<div class="header">
  		头部 - 导航栏目
  		<!--<p>
  			<a href="#/music">乡村音乐1</a>
  			<a href="#/movie">科幻电影1</a>
  			<a href="#/music">乡村音乐2</a>
  			<a href="#/movie">科幻电影2</a>
  		</p>-->
  		<p>
	  		<router-link :to="{name:'music'}">乡村音乐1</router-link>
	  		<router-link :to="{name:'movie'}">科幻电影1</router-link>
  		</p>
  	</div>
  	
  	<!--留坑，非常重要-->
		<router-view class="main"></router-view>
		
		<div class="footer">底部 - 版权信息</div>
		
  </div>
</template>

<script>
	export default {
	  data(){
	  	return{
	  		
	  	}
	  },
	  methods:{
	  	
	  }
	}
</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>

---

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
})

注意上述代码中的：{name: 'music',path: '/music_country',component: Music}
在代码中我们看到music_country，它的是设置就是规则，就是最终的路由规则。
浏览器效果，如下图所示：

---

其他主要文件的代码参考：“vue-router配置介绍和使用方法（一）”

---

以上就是关于“”的全部内容。