动态写标题名 通过route来获取具体的path里面的name

先来谈谈router和route的区别

	router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的			跳转链接就可以用this.$router.push，和router-link跳转一样。。。

	this.$router.push会往history栈中添加一个新的记录。。详细见vue官方文档https://router.vuejs.org/zh/guide/essentials/navigation.html

	$route为当前router跳转对象里面可以获取name、path、query、params等。


	再来看我需要从路由中动态获取name名来作为顶部的动态标题

template中写到：

		<el-main :class="{overflowHidden: overflowHidden}">
	            <div class="Breadcrumb" v-show="menuName != 'index'">
	              <el-breadcrumb separator="/">
	                <el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index" >{{item.name}}</el-breadcrumb-item>
	              </el-breadcrumb>
	            </div>
	            <transition name="fade-transform" mode="out-in">
	                <router-view ref="content"/>
	            </transition>
	       </el-main>

其中 breadcrumb是路由获取定义的

	<el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index" >{{item.name}}</el-breadcrumb-item>

data中

breadcrumb:[],

然后
实时监听路由的变化

	watch: {
	    $route(val) {
	      this.breadcrumb = val.meta.breadcrumb;
	      localStorage.setItem("breadcrumb", JSON.stringify(this.breadcrumb));
	      this.overflowHidden = true;
	      setTimeout(() => {
	        this.overflowHidden = false;
	      }, 550);
	    }
  	},

console.log(val)出来的是

存好val.meta.breadcrumb的值以便下次获取

这样的标题可以根据路由的变化而变化，无需每个都去定义