02_Vue路由传递参数

Vue路由传递参数

路由界面介绍

​ 这里是页面进行路由的配置,并且这里的名字最好大驼峰的方式进行抒写

// 调用user方法，将VueRouter作为一个vue组件来使用
Vue.use(VueRouter);

​ 下面的const router 是用来声明不同页面对应的不同的访问的路径

路由的配置

​ 在创建路由的对象中,我们添加路由的模式, 这里我们选择添加hash默认的格式,这样通过npm run serve启动项目的时候,就会自动打开网页了

const router = new VueRouter({
  routes,
  // 路由的两种模式  history 历史模式
  // hash:哈希模式 路径上带# 默认是此模式
  mode: "hash",
});

路由的两种模式

第一种是声明式路由

​ 它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址。

• to：导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to="/" ，
• [text] ：就是我们要显示给用户的导航名称。

<router-link to="/">[text]</router-link>
// 例子
<router-link to="/aa">界面内的a界面</router-link>

// router index.js文件
const routes = [
  {
    path: "/aa",
    name: "aa",
    component: AaView,
  },
]

​ 用于渲染界面所用的,例如我们在app的界面中引入的 默认界面,然后我们通过,将当前默认界面放入到router-view里面,就不用重复的去写页面了,这样就比较方便

<router-view ></router-view>

第二种是编程式路由

​ 这种就是我们在里面添加一个方法,让这个按钮点击这个方法的时候进行跳转

<button @click="go">跳转Aaview界面</button>

// methods

   methods: {
        go() {
            this.$router.push("/aa")
            // 使用replace做页面跳转时，此页面不会加入到历史页面中，因此无法后退
            // this.$router.replace('/aa')
        }
   }

路由传递参数

定义数据

​ 这里面的数据我们就随便定义了,

 data() {
        return {
            users: [
                {
                    id: 1,
                    name: "admin",
                    age: 18
                }, {
                    id: 2,
                    name: 'root',
                    age: 20
                }
            ]
        }
    },

渲染数据

​ 这里渲染数据就用v-for的方式进行渲染,当我们点更新这个按钮的时候跳转这个链接,进行参数的传递,注意第二种传递方式很不常用,因为刷新浏览器后,参数就会丢失,所以说没有什么用

<table>
            <tr v-for="(item, index) in users " :key="index">
                <td>{{ item.name }}</td>
                <td>{{ item.age }}</td>
                <td><button @click="update(item.id)">更新</button></td>
            </tr>
        </table>
        // methods方法中
               update(id) {
            // 跳转页面,将id值传到另外一个页面中 这种方式参数刷新浏览器不会丢失
            this.$router.push({
                //传参方式一: 动态路由传递参数  动态传递参数
                path: `/param/${id}`
                // -------------
                //传参方式二:  通过路由名称跳转界面 刷新参数就丢失 名称传参数
                // 方式二基本不用 ,没有用
                // name: 'param',
                // params: {
                //     id
                // }

                //-----------
                // 传参方式三:路径跳转,query传参
                // path: '/param',
                // query: { id }
            })
        }

​ 这里主要说下第一种与第三种方式,两种方式刷新浏览器都会

第一种方式

​ 根据router定义的路由,然后跳转到param这个界面

​ 注意方式一和方式二的接收参数方式相同,但是方式三接收参数的方式是通过query

path: `/param/${id}`

​ param界面接收传值过来的id

  路由参数:{{$route.params.id }}

第三种方式

​ 这里通过query将值到param界面,注意这里是将传递的值写在路径上面的

//传参方式三:路径跳转,query传参
path: '/param',
query: { id }

​ param界面接收传值过来的id

 路由参数:{{$route.query.id }}

y``将值到param界面,注意这里是将传递的值写在路径上面的

//传参方式三:路径跳转,query传参
path: '/param',
query: { id }

​ param界面接收传值过来的id

 路由参数:{{$route.query.id }}