<template>
    <button @click = "handle">點(diǎn)擊跳轉(zhuǎn)</button>
</template>
<script>
    export default{
        methods:{
            handle (){
            //  路徑/home對(duì)應(yīng)我在router目錄下index.js中定義的path屬性值
                this.$router.push('/home');
            }
        }
    }
</script>

export default new Router({
  routes: [
    {
      path: '/home',
      name:'Home',
      component: Home,
    },
 ]
})

//  路徑/home對(duì)應(yīng)router目錄下index.js中定義的path屬性值
this.$router.push('/home');

//  對(duì)應(yīng)router目錄下index.js中定義的path
this.$router.push({path:'/home'});

//  對(duì)應(yīng)router目錄下index.js中定義的name
this.$router.push({name:'Home'});

// params里面放置的是我們要傳遞過(guò)去的參數(shù)
this.$router.push({name:'Home',params:{user:'david'}});

// 帶查詢(xún)參數(shù)，傳遞過(guò)去的內(nèi)容會(huì)自動(dòng)拼接變成/home?user=david
this.$router.push({path:'/home',query:{user:'david'}});

//傳參
this.$router.push({name:'Home',params:{user:'david'}});

// 在name為Home的組件中接收參數(shù)
const id=this.$route.params.id;
console.log(this.$route.params);//打印結(jié)果為{user:'david'}

<div @click="toPath('/targetPage#target')">
    <p>點(diǎn)擊跳轉(zhuǎn)</p>
</div>

methods:{
    //點(diǎn)擊跳轉(zhuǎn)方法
    toPath(path) {
        this.$router.push({path: path})
    }
}

<div class="location" id="target">
    <p>指定位置</p>
</div>

//在mounted里
mounted() {
    var hash = window.location.hash;
    var index = hash.lastIndexOf("#");
    if (index != -1) {
       var id = hash.substring(index + 1, hash.length + 1);
       var div = document.getElementById(id);
       if (div) {
         setTimeout(function () {
           console.log($(div).offset().top);
           $('html, body').animate({scrollTop: $(div).offset().top - 43}, 500)
         }, 500);
       }
    }
}