vue中实现路由跳转的三种方式（超详细整理）

vue中实现路由跳转的三种方式

一、使用vue-router

vue-router 本质是一个第三方的包 用的时候需要下载

步骤 （7步法 ）：

1. 下载vue-router模块到当前工程

    yarn add vue-router
   

2. 在main.js中引入VueRouter函数

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

3. 添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件

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

4. 创建路由规则数组 – 路径和组件名对应关系

   创建路由规则数组（需要准备切换的页面组件）把准备好的页面组件引入到main.js中

   const routes = [{
               path: "/",
               redirect: "find" //默认显示推荐组件(路由的重定向)
           },
           {
               path: "/find",
               name: "Find",
               component: Find,
               //二级路由
               children: [{
                       path: "/",
                       redirect: "recom" //默认显示推荐组件
                   },
                   {
                       path: "ranking", //注意二级路由的路径千万不要加/
                       component: Ranking
                   },
                   {
                       path: "songlist",
                       compone