vue路由

1、声明式

　　传参的二种方式

　　　　params:/home/1/2　需要在路由path中配置　　{path:‘/home/:id/:age‘}

　　　　query:/home?id=1&age=2

　　接收参数

　　　　params：this.$route.params.id

　　　　query：this.$route.query.id

　　路由跳转

　　　　<router-link  to="/home">点击跳转</router-link>

　　　　<router-link  :to="{path:‘/home‘}">点击跳转</router-link>

　　　　<router-link  :to="{name:‘Home‘}">点击跳转</router-link>

　　　　<router-link  :to="{path: ‘/home‘, query:{id:1}}">点击跳转</router-link>

　　　　<router-link  :to="{path:‘/home‘, params:{id:1}}">点击跳转</router-link>　　// 无效

　　　　<router-link  :to="{name:‘Home‘, params:{id:1}}">点击跳转</router-link>

　　　　<router-link  :to="{name: ‘Home‘, query:{id:1}}">点击跳转</router-link>

2、编程式

　　this.$router.push(‘/home‘)

　　this.$router.push({path: ‘/home‘})

　　this.$router.push({name: ‘Home‘})

　　this.$router.push({path: ‘/home‘, params:{id:1}})　　// 无效

　　this.$router.push({path: ‘/home‘, query:{id:1}})

　　this.$router.push({name: ‘Home‘, params:{id:1}})

　　this.$router.push({name: ‘Home‘, query:{id:1}})

3、嵌套路由

　　一级路由显示在APP.vue中的<router-view />中

　　二级路由显示在它对应的一级路由组件的<router-view />中

　　let  routes  =  [

　　　　{

　　　　　　path:  ‘home‘,

　　　　　　name:  ‘Home‘,

　　　　　　component: ( )  =>  import(‘../views/Home‘)

　　　　},

　　　　{

　　　　　　path:  ‘list‘,

　　　　　　component: ( )  =>  import(‘../views/List‘),

　　　　　　children: [

　　　　　　　　{

　　　　　　　　　　path: ‘/list/list1‘,

　　　　　　　　　　component: ( )  =>  import(‘../views/list1‘)

　　　　　　　　},

　　　　　　　　{

　　　　　　　　　　path: ‘list2‘,

　　　　　　　　　　component: ( )  =>  import(‘../views/list2‘)

　　　　　　　　}

　　　　　　]

　　　　}

　　]

vue路由

原文：https://www.cnblogs.com/cuishuangshuang/p/13461211.html