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

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 页面案例：

<template>
  <div>
        跳转页面： <br/>
        方式一：(:to动态绑定name 或则 path) 页面自动解析成path地址 <br/>
        <router-link :to="{name:'RouterB'}">去B页面</router-link> <br/>
        方式二：(to="path")，只能指定path值  <br/>
        <router-link to="/RouterB">去B页面</router-link>  <br/>
        
        路由页面传入参数:<br/>
        方式一：(通过query传入参数，参数通过url get方式拼接) <br/>
        <router-link :to="{name:'RouterB', query: {name:'name1', title: 'title'} }">去B页面，传入参数</router-link>    <br/>

        方式二：(通过params传入参数，参数通过路径[/001]形式拼接到url上，如果没有在路径配置种使用参数占位符，url不会拼接，直接展示是具体路由页面) <br/>
        <router-link :to="{name:'RouterB', params: {name:'name2', title: 'title2'}}">去B页面，params传入参数</router-link> <br/>

  </div>
</template>

<script>
exprot default {
    
}
</script>
<style>
</style>

3.routerB.vue 页面案例

<template>
  <div>
        传入页面参数：{{params}}
  </div>
</template>
<script>
  export default {
      data(){
          return {
              params: ''
          }
      },
      //数据初始化完毕自动调用方法
      created(){
          //获取传入的参数
          var param = this.$router.query || this.$router.params;
          this.params = param
          //如果使用query方式传入的参数使用this.$router.query 接收
          //如果使用params方式传入的参数使用this.$router.params接收
      }
  }
</script>
<style>
</style>