前端路由rooter 组件(API 使用)

路由API:
1、引入rooter  import VRrouter from 'vue-router'  
2、使用该组件 Vue.use(VRrouter)    Vue.user 的意义:会自动阻止多次注册相同插件,届时只会注册一次该插件。
3、和后台开发一样 new  VRrouter 的一个对象出来 并赋予内部router 前端路由分配页面的一个属性
4、注册该插件 在new Vue({}) 中注册该插件  router 
5、在 app.vue 中使用该<router-view> 标签 表示:将app.vue 作为母版页,其他子页面的切换就在模板页上进行。
6、 <router-link :to="{path:'apple'}" tag='li'> apple</router-link>  当页面切换时 可以使用<router-link> 标签 中的to属性进行跳转。
  tag 表示可以转换成什么样的dom节点  可以是li,div 等等
<router-link> 默认是将其转换为 <a href ="xxx"> 但vue 中建议使用router-link  
注:获取当前路径API  this.$route.path
(后面继续学习,文章将会在后面继续迭代mark)
let router = new VRrouter({
  mode:'history', //默认是hash   也可以指定为history 模式
  routes:[
    {
      path:'/',
      component:indexPage //首页默认页面
    },
    {
      path:'/detail',
      component:Detail,
      redirect:'/detail/count',  //访问该路由时默认显示第一个子路由
      children:[  //子路由
        {
          path:'count',
          component:countPage
        },
        {
          path:'forecast',
          component:forecastPage
        }
      ]
    }
  ]
});

 

 

 
 
posted @ 2018-04-24 21:47  蓝色丶格调  阅读(282)  评论(0编辑  收藏  举报