vue编程式导航及路由高亮

1.在方法中实现

this.$router.push({path:"/hello"})//跳转到hello页面

2.replace方法是不向history中添加新纪录

this.$router.replace({path:"router"})

3.go的使用

this.$router.go(-)1

4.命名试路由

<template>
  <div id="app">
  	<ul>
  		<router-link to="/HelloWorld" tag="li">跳转到helloWorld</router-link>
  		<router-link :to="{name:'hello',params:{id:paramsId}}" tag="li">跳转到hello</router-link>
  	</ul>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
  	return{
  		paramsId:"测试命名式路由"
  	}
  }
}
</script>

获取路路由

 computed:{
  	getUrl(){
		return	this.$route.path
//      console.log(this.$route.path)
  	}
  }

路由高亮:在app.vue中

.router-link-active{
	color: red;
}

使用iconfont图标字体

iconfont

传递信息的途径:

  1)父传子

  2)子传父

  3)插槽

  4)挂载到全局

  5)挂载到局部

  6)vuex

猜你喜欢

转载自blog.csdn.net/amily8023/article/details/85987345