版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_26641781/article/details/83860083
- 在router.js定义需要传递的参数
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Error from './views/Error.vue'
import About1 from './views/About1.vue'
import About2 from './views/About2.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: "/",
redirect: '/home'
},
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/about/:id/:title',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
children:[
{
path: 'about1',
component: About1
},
{
path: 'about2',
component: About2
}
]
},
{
path: '*',
name: 'error',
component: Error
},
]
})
- 在App.vue里的About的url加上参数值
<template>
<div id="root">
<router-link to="/home">首页 \</router-link>
<router-link to="about/001/vue">关于</router-link>
<router-view></router-view>
</div>
</template>
- 在About.vue获取App.vue传递过来的参数值
<template>
<div class="about">
这是about组件
<br>
id:{{$route.params.id}}
<br>
title:{{$route.params.title}}
<br>
{{msg}}
<div>
<router-link to="/about/about1">about1</router-link>
<router-link to="/about/about2">about2</router-link>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
data(){
return{
msg: this.$route.params.id+this.$route.params.title
}
},
}
</script>