.Vue路由(路由配置、传参、获取参数)

this.$route 和 this.$router区别：

 this.$route 信息参数（query、prams）传参获取
 this.$router 功能函数，go()，push()等方法调用

1.导入和使用路由(main.js)：

  import Router from 'vue-router'
  // 使用路由
  Vue.use(Router)

  //导入vue页面
  import RouterA from '../page/router/routerA'
  import RouterB from '../page/router/routerB'

  export default new Router({
    routes: [
     {
        path: '/RouterA',
        component: 'RouterA'
      },
      {
        name: 'RouterB',
        //path: '/RouterB',
        path: '/RouterB/:name', //动态拼接路由path，如果不指定url只是路由页面，否则（/RouterB/name2）
        component: 'RouterB'
      }
    ]
  });

  参数说明：
      name: '名称，vue页面可通过name调用',
      path: '访问路径',
      component: '具体vue页面'

2.routerA.vue 页面案例：

3.routerB.vue 页面案例

 

作者：圆梦人生
链接：https://www.jianshu.com/p/f9a6c224128d
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。