new Router({

    routes: [{

            path: '/', //匹配路径

            name: 'Hello', //路由的别名

            component: Hello //需要加载的组件名

        }, {

            //使用变量名的形式传递参数。例如：/detail/10086

            //在Detail组件中使用{{$router.params.id}}来接收

            path: '/detail/:id',

            name: 'Detail',

            component: Detail

        }

    ]

})

代码实例

4.1、index.js

import Vue from 'vue'

import Router from 'vue-router'

import Hello from '@/component/Hello'

import Detail from '@/component/Detail'

Vue.use(Router)

export defaultnew Router({

    router: [{

            path: '/',

            name: 'Hello',

            component: Hello

        }, {

            path: '/detail/:id',

            name: 'Detail',

            component: Detail

        }]

})

4.2、Hello.vue：src->component->Hello.vue

 <template>

 <div class = "hello" >

     <h1>这是hello页面 </h1>

     < router - link: to = {name: 'Detail',params: {id: 10086}}>详情</router-link>

 </div>

 </template>

 <script>

export default{

    name: 'hello',

    data() {

        return {

            msg: 'hello vue'

        }

    }

}

 </script>

 < !--add "scoped" attribute limit css to this compent only-- >

 <style scoped>

    h1, h2 {

        font - weight: normal;

    }

    ul {

        list - style - type: none;

        padding: 0;

    }

    li {

        display: inline - block;

        margin: 0 10px;

    }

    a {

        color:  # 42b983

    }

    </style>

4.3、Detail.vue：src->component->Detail.vue

 < template >

 < div >

 < h1 > 这是detail页面 </h1>

 {{$route.params.id}}

 </div>

 </template>

 <script>

export default{

    name: 'hello',

    data() {

        return {}

    }

}

 </script>

 < !--add "scoped" attribute limit css to this compent only-- >

 < style scoped >

 </style>

4.4、启动项目

my_vue_app > npm run dev