Vue中实现路由跳转的三种方式(超详细整理)

 yarn add vue-router

// 引入路由
import VueRouter from "vue-router";

// 注册全局
Vue.use(VueRouter)

const routes = [{
            path: "/",
            redirect: "find" //默认显示推荐组件(路由的重定向)
        },
        {
            path: "/find",
            name: "Find",
            component: Find,
            //二级路由
            children: [{
                    path: "/",
                    redirect: "recom" //默认显示推荐组件
                },
                {
                    path: "ranking", //注意二级路由的路径千万不要加/
                    component: Ranking
                },
                {
                    path: "songlist",
                    component: SongList
                },
            ]
        },
        {
            path: "/my",
            name: "My",
            component: My
        },
        {
            path: "/part",
            name: "Part",
            component: Part
        },
        {
            path: "*",
            component: NotFound //定义找不到已有组件时显示404
        },
    ]

    // 创建路由对象并且传入规则
const router = new VueRouter({
    routes,
    mode: "history" //路由模式(默认为hash模式)
})

new Vue({
    router, //导入路由对象
    render: h => h(App),
}).$mount('#app')

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/part">朋友</router-link>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>
//在控制台元素检查时会发现激活的类名 在样式style中定义高亮样式 点击时就会高亮

this.$router.push({ name:‘hello', query:{ name:‘word', age:‘11' } })

var name = this.$route.query.name;

this.$router.push({
    name:"Home",
    params:{
        id:this.id
    }
})

this.$route.params.id

this.$router.push({
    path:"/Search",
    query:{ //query是个配置项
        age:20
    }
})

this.$route.query.age

this.$router.push({
    path:"/Search",
    query:{ //query是个配置项
        age:20
    }
})

this.$route.query.age