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)

本站以现代、古代情诗为主，情诗网创办于2013年，以原创爱情诗歌、经典情诗、现代情诗、古代情诗、英文情诗、情诗绝句为主并收集古诗、古诗词、诗歌大全、诗词名句的文学门户。方便您下次继续阅读；可以放在浏览器的收藏夹中（快捷键Ctrl+D）;或者看到喜欢或者有趣的诗词可以通过分享按钮给你的好友分享；情诗网是目前最全情诗大全网站之一。并欢迎广大诗歌爱好者阅览投稿！喜欢本站的话请大家把本站告诉给你朋友哦！地址是 www.qingshiwang.com ！