vue-router

动态路由 ，路由携参跳转 传递参数

Const routes = [ { path:’/user/:id’ , component:User } ]

<router-link :to=”’/user/’+id”>用户</router-link>

this.$route.params.id

 

非动态路由模式下的传参 ， 传个对象

<router-link :to=”{path:’/user’,query:{name:’who’,age:18,id:10}}”>用户</router-link>

结果/user?name=who&age=18&id=10

this.$route.query.id

 

代码跳转

userClick( ) { this.$router.push( ‘/user/’+this.userId ) }

userClick( ) { this.$router.push( { path:’/user’,query:{ name:’who’,age:18,id:10 } } ) }

userClick( ) { this.$router.replace( ‘/user/’+this.userId )

 

路由重定向

Const routes = [ { path:’’ , redirect:’/home’ },{path:’/home’,component:Home},{ path: , c: } ]

 

路由懒加载 ，跳转路由的时候在加载

Const routes = [ { path:’/home’ , compontent: ( ) => import( ‘ ../components/Home’) } ]

 

路由嵌套

const route ={path:’/home’,component:Home, children:[ {path:’news’,component:News}, { } ] }