Vue里面如何使用路由(二）

最新推荐文章于 2024-05-17 11:40:43 发布

努力学习的码农丫

最新推荐文章于 2024-05-17 11:40:43 发布

阅读量208

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_52264068/article/details/128435095

版权

1.重定向：打开时显示指定页面

写在路由配置规则最前面

2.Not Fund 404效果

写在路由配置规则最后面

3.hash模式和history模式

这两个模式的不同点就是，网址不一样

hash模式网址中有/#/

history模式网址中没有/#/，只有/

4.声明式导航传值

声明式导航传值分为两个步骤，一个是传值，一个是接收值。

声明式导航传值有两种方法：

传值1：to="/path?参数名=值"

传值2：to="/path/值"还需要再index.js中配置路由规则path上定义/path/:参数名

接收值1： $route.query.参数名

接收值2： $route.params.参数名

5.编程式导航切换和传值

总结：query两种方式都可以传递，params只能传递路由名称且路由地址要设置为path/:参数名称

<template>
  <div>
    <div class="footer_wrap">
      <span class="active" @click="btn('find')">发现音乐</span>
      <span @click="btn('my')">我的音乐</span>
      <span @click="btn2('/friend')">关注--张三2</span>
      <span @click="btn2('/friend2')">关注--李四2</span>
    </div>
    <div class="top">
      <!-- 8.显示对象路由地址的组件对象 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    btn(cname) {
      // 编程式导航传值：
      this.$router.push({
        // 方式1：路由地址方式
        path: cname,
      });
    },

    btn1(cname) {
      // 编程式导航
      this.$router.push({
        // 方式1：路由名称方式
        name: cname,
        /*  query: {
          newName: "query传递的参数1",
        }, */
        params: {
          newName: "query传递的参数11",
        },
      });
    },
    btn2(pathName) {
      // 编程式导航
      this.$router.push({
        // 方式2：路由地址方式
        path: pathName,
        // 方式1：query()
        /*  query: {
          newName: "query传递的参数2",
        }, */
        params: {
          newName: "query传递的参数22",//传递不了
        },
      });
    },
  },
};

/* 
编程式路由传参方式：
（1）如果路由传递方式是name路由名称，则参数可以使用query或者params传递
（2）如果路由传递方式是path路由地址，则参数只能使用query传递，params传递参数时会被忽略
（3）如果是使用params传递参数，则需将路由地址设置为path/:参数名称
 {
    path: '/friend2/:twoName',
    name: 'friend2',
    component: Friend2
 },

// 总结：query两种方式都可以传递，params只能传递路由名称且路由地址要设置为path/:参数名称
*/
</script>

<style scoped>
</style>



//接收值---都是这两句话，要符合上面所写的规则
//query---path路由地址
//params---name路由名称
 <div>关注1名称：{{ $route.query.oneName }}</div>
 <div>关注2名称：{{ $route.params.twoName }}</div>