vuexx

<template>

  <div id="app">

    <div class="nav">

      <router-link to="/find">发现音乐</router-link>

      <router-link to="/my">我的音乐</router-link>

      <router-link to="/friend?username=小黑">朋友-小黑</router-link>

      <router-link to="/friend/小马">朋友-小马</router-link>

     

    </div>

    <button @click="goto">去我的音乐页面</button>

    <button @click="goto2">去朋友页面</button>

    <!-- 路由出口 -->

    <router-view/>

  </div>

</template>

<script>

/**

 * 目标：编程式导航（js跳转页面）

 * name 或 path选其一

 * 如果需要用name跳转，需要在路由规则中给路由规则对象添加name属性，并且不能重复

 * 建议根path保持一致，有name属性的路由，我们也称为命名路由

 * 语法：this.$router.push({

 *  path: '要去的路由路径‘,

 *  name: '要去的路由名字‘

 * })

 *

 * 目标：编程式导航（js跳转页面）- 跳转传参

 * 语法：

 * 1. name + params -> $route.params.参数名

 *

 * 2. path + query -> $route.query.参数名

 *

 *

 */

export default {

  name: 'App',

  methods: {

    goto(){

      this.$router.push({

        // path: '/my'

        name: 'my'

      })

    },

    goto2(){

      // name + params

       // <h3>我是: {{ $route.params.uname }}</h3>

      this.$router.push({

        name: 'friend/detail',

        params: {

          uname: '小传'

        }

      })

      // path + query

 //<h3>我是: {{ $route.query.username }}</h3>

      this.$router.push({

        path: '/friend',

        query: {

          username: '小智'

        }

      })

    }

  }

}

/**

 * 两个类的区别：

 * router-link-exact-active: 精准匹配，就是a的href属性值与url地址完全一样（全等关系）

 * router-link-active: 模糊匹配，就是url地址包含a的href属性值即可（以a的href属性值开头）

 */

/**

 * 目标：跳转传参

 * 方式：

 * （1）query：

 *   传：/path?参数名=值    

 *   接：$route.query.参数名

 *

 * (2) params:

 *  传：/path/值

 *  需要在路由规则中配置 动态参数的 路由 /path/:参数名

 *  接：$route.params.参数名

 *

 * 注意点：自己不要自己，url地址如果与要去path一样了，不能跳转了，否则会报错。

 */

</script>

<style scoped>

  a {

    margin-right: 20px;

  }

  a.router-link-active {

    color: red;

  }

</style>