前端路由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
        }
      ]
    }
  ]
});

 

 

 

 

转载于:https://www.cnblogs.com/lanSeGeDiao/p/8933984.html