vue 路由传参

1、路由传参

　　

 

　　子组件接收传来的值 ：{{$route.name}}

2、绑定 :to 传参

　　<router-link :to="{name:'Home-First-First',params:{id:123}}">first</router-link>

　　子组件接收传来的值：{{$route.params.id}}

 

具体源码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter) //全局使用该组件

// 声明常量
const first = {
    template:'<div>first内容</div>'
}
const second = {
    template:'<div>second内容</div>'
}
const Home = {
    template:'<div>Home内容</div>'
}
const asdf = {
    template:`
        <div class="asdf">
            <h2>组件</h2>
            <router-view></router-view>
        </div>
    `
}
const firstFirst = {
    template:'<div>firstFirst内容{{$route.params.id}}</div>'
}
const firstSecond = {
    template:'<div>firstSecond内容{{$route.params.id}}</div>'
}

const router = new VueRouter({
    mode:'history',
    base:__dirname,//基础路径
    routes:[ //路由
        {
            path:'/',
            name:'Home',
            component:Home
        },//当根目录时，显示Home
        {
            path:'/first',
            component:asdf,//子组件名
            children:[
                {
                    path:'/',
                    name:'Home-First',
                    component:first
                },
                {
                    path:'first',
                    name:'Home-First-First',
                    component:firstFirst
                },
                {
                    path:'second',
                    name:'Home-First-Second',
                    component:firstSecond
                }
            ]

        },
        {
            path:'/second',
            name:'Home-Second',
            component:second
        }
    ]
})

new Vue({
    router,
    template:`
    <div id="r">
        <h1>导航</h1>
        <p>{{$route.name}}</p>
        <ol>
            <li>
                <router-link to="/">/</router-link>               
            </li>                
            <li>
                <router-link to="/first">first</router-link>
                <ol>              
                    <li>
                        <router-link :to="{name:'Home-First-First',params:{id:123}}">first</router-link>
                    </li>
                    <li>
                    <router-link :to="{name:'Home-First-Second',params:{id:321}}">second</router-link>
                    </li>
                </ol>
            </li>
            <li>
            <router-link to="/second">second</router-link>
            </li>
        </ol>
        <router-view></router-view>
    </div>
    `
}).$mount('#app')//f发布到app中去