vue route 带参数跳转路由

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

$route.params 用于获取在路由上定义的变量 path:’/test/:id

$route.query 类似于get 获取url栏上面的变量

路由代码：

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>