vue-router的使用（一）声明式/编程式

vue-router的使用有两种方式：

image.png

声明式

使用<router-link :to="/"><router-link>点击跳转
使用<router-view></router-view>显示路由页面的信息

let route = new VueRouter({
  routes:[{
    path: '/',
    name: 'home',
    component: Home
  }]
});

• 动态路由
  传参和获取参数

let route = new VueRouter({
  routes:[{
    path: '/user/:id',
    name: 'user',
    component: User
  }]
});

//传递参数
<router-link :to=`/user/123`></router-link>
//获取参数(路径中？前面的)
this.$route.params.id

//获取参数(路径中？后面的)  /user?id=123
this.$route.query.id

let route = new VueRouter({
  routes:[{
    path: '/user/:id',
    name: 'user',
    component: User,
    children:[{
      path:'more',
      component:More
    }]
  }]
});

//  /user/:id/more
<router-link to='more' append></router-link>

直接使用router-link更方便简单，多数情况下是使用这种方式。而编程式能够控制细节，实现更多不同的功能，但是会比较麻烦一点。

编程式

this.$router.push('/') //回到根目录

setTimeout(function(){
  this.$router.push('/') //一秒后回到根目录
},1000);

动态路由

// /user/:id
this.$router.push('/user/123') 
//or
this.$router.push({name:'user', params:{id:'123'}})

• 这里的name是上面

let route = new VueRouter({
  routes:[{
    path: '/user/:id',
    name: 'user',
    component: User,
    children:[{
      path:'more',
      component:More
    }]
  }]
});

中的name属性的值；这里就显示出route中name属性的作用来了

有时候面试的时候别人就会问，路由中name属性有什么作用呢？

这就是答案

• params是动态的参数，是一个对象。

多个router-view的使用

如果一个页面有多个router-view的时候应该怎么区分呢？

<router-link to='/page'>page<router-link>
<router-view name='sidebar'></router-view>
<router-view name='content'></router-view>

let route = new VueRouter({
  routes:[{
    path: '/page',
    name: 'page',
    components: {
      sidebar,//组件一
      content//组件二
    }
  }]
});