vue2.0—路由嵌套和路由传参

vue2.0—路由传参

构建项目和创建组件就不细说了，不懂的可以去官方文档API学习

VUE官方文档：https://cn.vuejs.org/v2/guide/

vue2.0 路由传参一共有两种放法

1.创建组件home和child，并且在home组件中定义路由

//home.vue

<router-link to="/home/child">新闻一</router-link>
<router-view></router-view>

2. 配置路由

//router.js
import Vue from 'vue'
import Router from 'vue-router'
import home from "../components/home/home"
import child from "../components/child/child"
Vue.use(Router)
export default new Router({
  routes: [
       {
        path:'/home/',
        component:home,
        children:[
             {
                path:'child',
                component:child
             },
        ]
       },
       {
        path:'*',
        redirect:'/home'
       }
  ],
  linkActiveClass:"active"
})

3 传递参数

1） 在组件模板中直接传值

//home.vue
<router-link to="/home/child?username=tom&age=20">新闻一</router-link>

//child.vue  获取值
console.log(this.$route.query)

2） 在路由配置中定义相关变量，在模板中传值

//router.js
{
    path:'child/:username/:age',
    child
 },

//home.vue  获取值
<router-link to="/home/child/jack/24">新闻一</router-link>

//child.vue  获取值
console.log(this.$route.params)