cnode社区

面试要点：(单页应用重点在vue-router)

单页应用，页面只有一个 APP组件；
vue-router实现页面内视图跳转，多个router-view可以显示多个组件，router-view根据路由的定位显示组件；
APP.vue项目结构：

<div id="app">
    <Header></Header>
    <div class="main">
        <router-view name="slidebar"></router-view>
        <router-view name="main"></router-view>
    </div>
</div>

路由的配置结构

export default new Router({
  routes: [
    {
      name: 'root',
      path: '/',
      components:{
        main: PostList
      }
    },
    {
      name: 'post_content',
      path:'/topic/:id&author=:name',
      components:{
        main:Article,
        slidebar: SlideBar,
      }
    },
    {
      name:'user_info',
      path: '/userinfo/:name',
      components:{
        main: UserInfo,
      }
    }
  ]
})

路由的跳转路径path可以设置参数(前面加:)，参数由router-link提供，

<router-link :to="{name:'post_content',params:{id:post.id,name:post.author.loginname}}">

路由跳转后，个人详情页（userInfo）和文章详情页（Article）发送请求获得数据时需要拿到此时路由的上的参数；this.$route.params.XXX

getArticleData(){
  this.$http.get(`https://cnodejs.org/api/v1/topic/${this.$route.params.id}`)
    .then(res=>{
      if(res.data.success == true){
        this.isLoading = false
        this.post = res.data.data
       }
     })
    .catch(err=>{console.log(err)})
}

总结：

router-link 动态绑定 to 属性指定跳转的路由name并提供路由需要的参数
router配置里path需要的参数和vue组件获取路由上的参数都来自router-link。

watch 监听路由的变化
当路由变化时，需要重新请求数据更新页面，例如在文章详情页点开了另一篇文章的链接，根据路由的变化，重新发送请求拿到数据，所以要使用watch属性监听$route

watch:{
  $route: function(to,from){
    this.getArticleData()
  }
}