vue router 参数获取

Posted 2022-03-02 zhx119

vue router 参数获取通常是通过$route.query和$route.params方法这里将这两种方式通过代码展示出来：

路由代码：

import Vue from ‘vue‘

import Router from ‘vue-router‘

import Home from ‘./views/Home.vue‘

import UserAdd from ‘./components/UserAdd‘

import UserList from ‘./components/UserList‘

import Detail from ‘./components/UserDetail‘

// import Login from ‘./components/Login‘

Vue.use(Router)

export default new Router(

mode: ‘history‘,

base: process.env.BASE_URL,

routes: [

path: ‘/‘,

name: ‘home‘,

component: Home,

meta:

needLogin:true

,

children: [

path: ‘add‘,

component: UserAdd

,

path: ‘list‘,

component: UserList

,

path: ‘detai/:id‘, //这里可以通过$route.params获取路由参数

component: Detail

,

path: ‘detai‘,

component: Detail

]

,

]

)

用户列表代码：

<template>

<div>

<ul>

<li>

<router-link to="detai?id=1">用户1</router-link> // 这里可以通过$route.query获取路由参数

</li>

<li>

<router-link to="detai?id=2">用户2</router-link> // 这里可以通过$route.query获取路由参数

</li>

<li>

<router-link to="detai/3">用户3parames</router-link>

</li>

</ul>

</div>

</template>

<script>

export default

 

</script>

详情页代码：

<template>

<div>

<div>

detail

this.$route.query.id //通过this.$route.query.id

this.$route.params.id// 通过this.$route.params.id

</div>

</div>

</template>

<script>

export default

mounted()

console.log(this.$route.query.id) //这里必须有mounted函数执行否则会报错不知道啥原因

</script>